在父元素或子元素中使用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部分详细介绍了如何确保成功记录事件的可能性。