在父元素或子元素中使用onclick事件？

Question

爲了得到我的情況，我有一個小小的故事： 我的同事監視GA的東西告訴我，當試圖跟蹤有多少人點擊我們網站上的內容時，它並未開火。現在我無法訪問谷歌帳戶來檢查我的更改是否正常工作，她現在生病了（並且沒有我的公司不希望GA帳戶因爲任何原因而被共享）

因此，當我等待時，來這裏問問。目前GA的設置是這樣的，我想知道onclick在哪裏很重要？在這種情況下，它應該在錨標籤中嗎？或者把它留在那個div裏好嗎？

HTML：

<table> 
    <tr> 
    <td><div onclick="ga('send', 'event', 'Participant_Centre', 'Click', 'PledgeSheet');"><a href="this_tool" target="_blank">Pledge Sheet</a></div></td> 

    <td><div onclick="ga('send', 'event', 'Participant_Centre', 'Click', 'StepByStepGuide');"><a href="this_tool" target="_blank">Step by Step Guide</a></div></td> 

    </tr> 
    <tr> 
    <td><div onclick="ga('send', 'event', 'Participant_Centre', 'Click', 'SampleBudget');"><a href="this_tool" target="_blank">Sample Budget</a></div></td> 
    <td><div onclick="ga('send', 'event', 'Participant_Centre', 'Click', 'LawnSign');"><a href="this_tool" target="_blank">Lawn Sign</a></div></td> 
    </tr> 
    <tr> 
    <td><div onclick="ga('send', 'event', 'Participant_Centre', 'Click', 'EventPlanningChart');"><a href="hthis_tool" target="_blank">Event Planning Chart</a></div></td> 
    <td><div onclick="ga('send', 'event', 'Click', 'ParticipantCentre', 'FundraisingThermometer');"><a href="hthis_tool" target="_blank">Fundraising Thermometer</a></div></td> 
    </tr> 
</table> 

我不知道是誰發或將其設置這種方式，但它看起來我錯了，主要是因爲我不把div的，因爲佈局問題TD內。

我改變了它是這樣的：

HTML：

<div class="container"> 
    <div class="col-lg-12"> 
     <div class="col-md-3"> 
     <a href="this_tool" target="_blank" onclick="ga('send', 'event', 'Participant_Centre', 'Click', 'PledgeSheet');">Pledge Sheet</a> 
     </div> 
     <div class="col-md-3"> 
     <a href="this_tool" target="_blank" onclick="ga('send', 'event', 'Participant_Centre', 'Click', 'StepByStepGuide');">Step by Step Guide</a> 
      </div> 
[...] 

這是一個更好的設置？那可能就是爲什麼它沒有射擊？該GA代碼本身是正確的，因爲我們之前使用它爲其他頁面，這些頁面已經將它設置了一個有點不同，像這樣的（但仍然有針對性的子元素跨度）：

 <li data-toggle="collapse" data-target=".navbar-collapse"> 
          <a class="navLink" href="website" target="_blank"><span class="navTextWhite" onclick="ga('send', 'event', 'VolunteerHomepage', 'navbar', 'signup');">Sign me up!</span></a> 
         </li> 

因爲我看到^ I想要知道onclick是否在用於GA跟蹤的父元素或子元素中。

謝謝你的時間！

Answer 1

onClick應該確實位於要跟蹤的元素上，即<a href>標記。

如果它在div上，那麼當div中有一個點擊時，事件就會觸發，這可能不一定在<a href>標記上。以下面的代碼片段中的兩個元素爲例。點擊第二個<div>上的任意位置將觸發該事件。

function ga() { 
 
    console.log(arguments); 
 
    }

.col-12 { 
 
    width: 100%; 
 
    min-height: 150px; 
 
    background-color: #aff; 
 
    padding: 20px; 
 
} 
 

 
.col-6 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #bbb; 
 
    margin: 10px; 
 
    padding: 20px; 
 
    float: left; 
 
}

<div class="top-container"> 
 
    <div class="col-12"> 
 
    <div class="col-6"> 
 
     <a href="#" onclick="ga('send', 'event', 'Participant_Centre', 'Click', 'PledgeSheet');">Pledge Sheet</a> 
 
    </div> 
 
    <div class="col-6" onClick="ga('send', 'event', 'Participant_Centre', 'Click', 'PledgeSheet2');"> 
 
     <a href="#">Pledge Sheet 2</a> 
 
    </div> 
 
    </div> 
 
</div>

您的跟蹤代碼可能無法工作，因爲Web瀏覽器將停止當前頁面上執行JavaScript，一旦一個新的頁面開始加載。 API文檔的Sending Data to Google Analytics部分詳細介紹瞭如何確保成功記錄事件的可能性。