谷歌分析 - 跟踪文件下载，无需修改现有链接

Question

我想添加到我的网站文件下载与谷歌分析跟踪。

我知道我需要为网站上的所有链接添加一个'onclick'事件。
像这样：

<a href="file.pdf" onclick="ga('send', 'event', 'Google Link', 'Action 
label', 'Action Value');">link</a> 

但我有这么多的链接，因此是不实际的。

有没有办法在同一个地方写任何代码？

谢谢。

Answer 1

你可以做什么，是定义一个全局事件跟踪，您需要与目标=“_空白”目标=“_自我”或与事件event.preventdefault（）非常小心，

这里你可以怎么做，对具有HREF指定的文件扩展名的所有环节连接事件：

console.clear(); 
 
(function ($) { 
 
    var filesExtensions = ['.pdf', '.docx', '.xsls', '.jpg']; 
 
    //attach event for each file 
 
    filesExtensions.forEach(function (element) { 
 
     //http://api.jquery.com/attribute-ends-with-selector/ 
 
     //why mouse down? becouse a link can have target _blank or some other preventdefault or stopPropagation on click event defined 
 
     //you can use click, but you might face some problems 
 
     $("a[href$='" + element + "']").mousedown(function (event) { 
 
      pushDownload(event.target); 
 
     }); 
 
     //prevent event propagation (stack overflow will show ugly server error at link navigation) 
 
     //this click event is not part of implemntation 
 
     //TODO: remove on your website 
 
     $("a[href$='" + element + "']").click(function (event) { 
 
      event.preventDefault(); 
 
     }); 
 
    }); 
 

 
    function pushDownload(target) { 
 
     var eventCategory = "Files"; 
 
     var eventAction = "Download"; 
 
     var eventLabel = getFileName($(target).attr('href')); 
 
     console.log("ga('send', 'event', '" + eventCategory + "', '" + eventAction + "','" + eventLabel + '");'); 
 
     if (window.ga && ga.loaded) { 
 
      ga('send', 'event', eventCategory, eventAction, eventLabel); 
 
     } 
 
     else { 
 
      console.error("Exception: ga undefined"); 
 
     } 
 
    }; 
 

 
    function getFileName(str) { 
 
     return str.substr(str.lastIndexOf("/") + 1); 
 
    }; 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="file.pdf">file.pdf download</a><br> 
 
<a href="file.docx">file.docx download</a><br> 
 
<a href="/invoices/invoice.pdf">invoice.pdf download</a>