added google analytics outbound link tracking

Author: ErikBjare

templates/analytics-thankful.pug

@@ -4,6 +4,44 @@
 | window.dataLayer = window.dataLayer || [];
 | function gtag(){dataLayer.push(arguments);}
 | gtag('js', new Date());
-
+|
 | gtag('config', 'UA-121109725-1');
 |</script>
+|
+|<script>
+|// From: https://support.google.com/analytics/answer/7478520?hl=en
+|/**
+|* Function that registers 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 getOutboundLink = function(urlOrEvent) {
+|  let url;
+|  let target;
+|  if(typeof urlOrEvent === 'string') {
+|    url = urlOrEvent;
+|  } else {
+|    let event = urlOrEvent || window.event;
+|    let el = event.target || event.srcElement;
+|    if(!el.href) el = el.parentNode;
+|    url = el.href;
+|    target = el.target;
+|  }
+|  //console.log(url);
+|  //console.log(target);
+|  if(window.google_tag_manager) {
+|    gtag('event', 'click', {
+|         'event_category': 'outbound',
+|         'event_label': url,
+|         'transport_type': 'beacon',
+|         'event_callback': function() {
+|           window.open(url, target);
+|           //document.location = url;
+|         }
+|    });
+|  } else {
+|    window.open(url, target);
+|  }
+|}
+|</script>

thankful/index.pug

@@ -37,10 +37,10 @@ html
 
                 div(style="display: flex; align-items: center; justify-content: center;")
                   div(style="margin-right: 1em")
-                    a(href="https://chrome.google.com/webstore/detail/thankful/eapbondnpopbiepnjfhnaaejfdfjhnde")
+                    a(href="https://chrome.google.com/webstore/detail/thankful/eapbondnpopbiepnjfhnaaejfdfjhnde", target="_blank", onclick="getOutboundLink(event); return false;")
                       img(src="https://developer.chrome.com/webstore/images/ChromeWebStore_BadgeWBorder_v2_206x58.png")
                   div
-                    a(href="https://addons.mozilla.org/en-US/firefox/addon/getthankful/")
+                    a(href="https://addons.mozilla.org/en-US/firefox/addon/getthankful/", target="_blank", onclick="getOutboundLink(event); return false;")
                       img(src="https://addons.cdn.mozilla.net/static/img/addons-buttons/AMO-button_1.png")
 
                 div.mdl-typography--body-2-color-contrast(style="margin-top: 0.5em")