Google Analytics - 既存のリンクを変更せずにファイルのダウンロードを追跡する

Question

Google Analyticsを使用して自分のサイトのファイルダウンロードトラッキングに追加したい。

私は、サイト上のすべてのリンクに 'onclick'イベントを追加する必要があることを理解しています。このよう
：

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

しかし、それは現実的ではありませんので、私は非常に多くのリンクを持っています。

同じことを行う1つの場所にコードを書く方法はありますか？

ありがとうございました。あなたは何ができるか

Answer 1

は、グローバルイベントトラッキングを定義することで、あなたがターゲットに非常に注意する必要があります=「_ブランク」ターゲット=「_自己」またはevent.preventdefaultと（）イベントで、

ここにあります

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>