Add tracker feature to automatically track outbound links

lib/plausible_web/controllers/tracker_controller.ex

@@ -16,6 +16,13 @@ defmodule PlausibleWeb.TrackerController do
     [:base_url]
   )
 
+  EEx.function_from_file(
+    :defp,
+    :render_plausible_outbound_links,
+    Application.app_dir(:plausible, "priv/tracker/js/plausible.outbound-links.js"),
+    [:base_url]
+  )
+
   EEx.function_from_file(
     :defp,
     :render_p,
@@ -34,6 +41,10 @@ defmodule PlausibleWeb.TrackerController do
     send_js(conn, render_plausible_hash(base_url()))
   end
 
+  def plausible_outbound_links(conn, _params) do
+    send_js(conn, render_plausible_outbound_links(base_url()))
+  end
+
   def analytics(conn, _params) do
     send_js(conn, render_plausible(base_url()))
   end

lib/plausible_web/router.ex

@@ -38,6 +38,7 @@ defmodule PlausibleWeb.Router do
 
   get "/js/plausible.js", PlausibleWeb.TrackerController, :plausible
   get "/js/plausible.hash.js", PlausibleWeb.TrackerController, :plausible_hash
+  get "/js/plausible.outbound-links.js", PlausibleWeb.TrackerController, :plausible_outbound_links
   get "/js/analytics.js", PlausibleWeb.TrackerController, :plausible
   get "/js/p.js", PlausibleWeb.TrackerController, :p
 

lib/plausible_web/templates/layout/_tracking.html.eex

@@ -1,4 +1,4 @@
 <%= if !@conn.assigns[:skip_plausible_tracking] do %>
-  <script async defer src="<%="#{plausible_url()}/js/plausible.js"%>"></script>
+  <script async defer src="<%="#{plausible_url()}/js/plausible.outbound-links.js"%>"></script>
   <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
 <% end %>

tracker/compile.js

@@ -17,5 +17,6 @@ function compilefile(input, output, templateVars = {}) {
 
 compilefile(relPath('src/plausible.js'), relPath('../priv/tracker/js/plausible.js'))
 compilefile(relPath('src/plausible.js'), relPath('../priv/tracker/js/plausible.hash.js'), {hashMode: true})
+compilefile(relPath('src/plausible.js'), relPath('../priv/tracker/js/plausible.outbound-links.js'), {outboundLinks: true})
 compilefile(relPath('src/p.js'), relPath('../priv/tracker/js/p.js'))
 fs.copyFileSync(relPath('../priv/tracker/js/plausible.js'), relPath('../priv/tracker/js/analytics.js'))

tracker/src/plausible.js

@@ -48,6 +48,38 @@
     }
   }
 
+  {{#if outboundLinks}}
+  function trackOutboundLink(event) {
+    var link = event.target;
+    while (link && (typeof link.tagName == 'undefined' || link.tagName.toLowerCase() != 'a' || !link.href)) {
+     link = link.parentNode;
+    }
+
+    if (link && link.href) {
+      plausible('Outbound Link: Click', {meta: {url: link.href}})
+    }
+
+    // Delay navigation so that Plausible is notified of the click
+    if(!link.target || link.target.match(/^_(self|parent|top)$/i)) {
+      setTimeout(function() { location.href = link.href; }, 150);
+      event.preventDefault();
+    }
+  }
+
+  function registerOutboundLinkEvents() {
+    window.addEventListener('load', function() {
+      var links = document.getElementsByTagName('a')
+
+      for (var i = 0; i < links.length; ++i) {
+        var link = links[i]
+        if (link.host !== location.host) {
+          link.addEventListener('click', trackOutboundLink);
+        }
+      }
+    });
+  }
+  {{/if}}
+
   try {
     var his = window.history
     if (his.pushState) {
@@ -62,6 +94,9 @@
     {{#if hashMode}}
     window.addEventListener('hashchange', page)
     {{/if}}
+    {{#if outboundLinks}}
+    registerOutboundLinkEvents()
+    {{/if}}
 
 
     var queue = (window.plausible && window.plausible.q) || []