title: Replacing inline onclick function with addEventListener()
body: <p>I have two pieces of code that is used for tracking my website's click events on every outbound link in Google Analytics, and the HTML portion looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    
  &lt;a class="shopitem" href="&lt;?php echo $itemurl; ?&gt;" onclick="gaTrack('&lt;?php echo $merchant; ?&gt;','&lt;?php echo $itemurl; ?&gt;'); return false;"&gt;&lt;?php echo $itemtitle; ?&gt;&lt;/a&gt;
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>And I have the below Google Analytics javascript code placed within head tags:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;
  &lt;script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-1"&gt;&lt;/script&gt;
  &lt;script&gt;
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  
    gtag('config', 'UA-XXXXXXXX-1'); 
  
    /**
     * Function that tracks a click on an outbound link in Analytics.
     * This function takes a valid URL string as an argument, and uses that URL string
     * as the event label. Setting the transport method to 'beacon' lets the hit be sent
     * using 'navigator.sendBeacon' in browser that support it.
     */
    var gaTrack = function(merchant, url) {
          gtag('event', 'click', {
                     'event_category': 'outbound',
                     'event_label': merchant,
                     'transport_type': 'beacon',
                     'event_callback': function(){document.location = url;}
          });
    } 
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, someone told me that using inline onclick function is not good as using addEventListener for event tracking, so I tried to modify my HTML code to something like below: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="shopitem" id="shop_link" name="&lt;?php echo $merchant; ?&gt;" href="&lt;?php echo $itemurl; ?&gt;"&gt;&lt;?php echo $itemtitle; ?&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and split my javascript into two portions:</p>
  
  <p>one is still placed within head tags, </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;
  &lt;script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-1"&gt;&lt;/script&gt;
  &lt;script&gt;
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  
    gtag('config', 'UA-XXXXXXXX-1'); 
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the other is placed in footer (after the HTML code):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    &lt;script&gt;
    /**
     * Function that tracks a click on an outbound link in Analytics.
     * This function takes a valid URL string as an argument, and uses that URL string
     * as the event label. Setting the transport method to 'beacon' lets the hit be sent
     * using 'navigator.sendBeacon' in browser that support it.
     */
    var gaTrack = function(merchant, url) {
          gtag('event', 'click', {
                     'event_category': 'outbound',
                     'event_label': merchant,
                     'transport_type': 'beacon',
                     'event_callback': function(){document.location = url;}
          });
    } 
  
      var x = document.getElementById("shop_link");
      if (x.addEventListener) {
          x.addEventListener("click", gaFunction);
      } else if (x.attachEvent) {
          x.attachEvent("onclick", gaFunction);
      }
  
      function gaFunction() {
          gaTrack(x.name,x.href); return false;
      }
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After modification, the new code does send information to Google Analytics but only in some cases, that means when I clicked the outbound links myself, only very few clicks were recorded by Google Analytics, most of them were missed....
  Anyone can help on this problem and make it record all outbound click events?
  Thanks in advance!</p>