Handle page visibility change when preloading (#311)

priv/tracker/js/analytics.js

-!function(r,i){"use strict";var o=r.location,s=r.document,e=s.querySelector('[src*="'+i+'"]'),l={domain:e&&e.getAttribute("data-domain")||o.hostname};function u(e){console.warn("[Plausible] Ignore event: "+e)}function t(e,t){if(/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/.test(o.hostname)||"file:"===o.protocol)return u("running locally");if("prerender"===s.visibilityState)return u("prerendering");var n={};n.n=e,n.u=o.href,n.d=l.domain,n.r=s.referrer||null,n.w=r.innerWidth;var a=new XMLHttpRequest;a.open("POST",i+"/api/event",!0),a.setRequestHeader("Content-Type","text/plain"),a.send(JSON.stringify(n)),a.onreadystatechange=function(){4==a.readyState&&t&&t.callback&&t.callback()}}function n(){t("pageview")}try{var a,c=r.history;c.pushState&&(a=c.pushState,c.pushState=function(){a.apply(this,arguments),n()},r.addEventListener("popstate",n));var p=r.plausible&&r.plausible.q||[];r.plausible=t;for(var d=0;d<p.length;d++)t.apply(this,p[d]);n()}catch(e){(new Image).src=i+"/api/error?message="+encodeURIComponent(e.message)}}(window,"<%= base_url %>");
+!function(i,r){"use strict";var s=i.location,o=i.document,e=o.querySelector('[src*="'+r+'"]'),l=e&&e.getAttribute("data-domain"),t=!1;function n(e,t){if(/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/.test(s.hostname)||"file:"===s.protocol)return console.warn("Ignoring event on localhost");var n={};n.n=e,n.u=s.href,n.d=l,n.r=o.referrer||null,n.w=i.innerWidth;var a=new XMLHttpRequest;a.open("POST",r+"/api/event",!0),a.setRequestHeader("Content-Type","text/plain"),a.send(JSON.stringify(n)),a.onreadystatechange=function(){4==a.readyState&&t&&t.callback&&t.callback()}}function a(){n("pageview")}try{var c,p=i.history;p.pushState&&(c=p.pushState,p.pushState=function(){c.apply(this,arguments),a()},i.addEventListener("popstate",a));var u=i.plausible&&i.plausible.q||[];i.plausible=n;for(var d=0;d<u.length;d++)n.apply(this,u[d]);"prerender"===o.visibilityState?o.addEventListener("visibilitychange",function(){t||"visible"!==o.visibilityState||(t=!0,a())}):a()}catch(e){(new Image).src=r+"/api/error?message="+encodeURIComponent(e.message)}}(window,"<%= base_url %>");
\ No newline at end of file

priv/tracker/js/plausible.hash.js

-!function(r,i){"use strict";var o=r.location,s=r.document,e=s.querySelector('[src*="'+i+'"]'),l={domain:e&&e.getAttribute("data-domain")||o.hostname};function c(e){console.warn("[Plausible] Ignore event: "+e)}function t(e,t){if(/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/.test(o.hostname)||"file:"===o.protocol)return c("running locally");if("prerender"===s.visibilityState)return c("prerendering");var n={};n.n=e,n.u=o.href,n.d=l.domain,n.r=s.referrer||null,n.w=r.innerWidth,n.h=1;var a=new XMLHttpRequest;a.open("POST",i+"/api/event",!0),a.setRequestHeader("Content-Type","text/plain"),a.send(JSON.stringify(n)),a.onreadystatechange=function(){4==a.readyState&&t&&t.callback&&t.callback()}}function n(){t("pageview")}try{var a,u=r.history;u.pushState&&(a=u.pushState,u.pushState=function(){a.apply(this,arguments),n()},r.addEventListener("popstate",n)),r.addEventListener("hashchange",n);var p=r.plausible&&r.plausible.q||[];r.plausible=t;for(var d=0;d<p.length;d++)t.apply(this,p[d]);n()}catch(e){(new Image).src=i+"/api/error?message="+encodeURIComponent(e.message)}}(window,"<%= base_url %>");
+!function(i,r){"use strict";var s=i.location,o=i.document,e=o.querySelector('[src*="'+r+'"]'),l=e&&e.getAttribute("data-domain"),t=!1;function n(e,t){if(/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/.test(s.hostname)||"file:"===s.protocol)return console.warn("Ignoring event on localhost");var n={};n.n=e,n.u=s.href,n.d=l,n.r=o.referrer||null,n.w=i.innerWidth,n.h=1;var a=new XMLHttpRequest;a.open("POST",r+"/api/event",!0),a.setRequestHeader("Content-Type","text/plain"),a.send(JSON.stringify(n)),a.onreadystatechange=function(){4==a.readyState&&t&&t.callback&&t.callback()}}function a(){n("pageview")}try{var c,p=i.history;p.pushState&&(c=p.pushState,p.pushState=function(){c.apply(this,arguments),a()},i.addEventListener("popstate",a)),i.addEventListener("hashchange",a);var u=i.plausible&&i.plausible.q||[];i.plausible=n;for(var h=0;h<u.length;h++)n.apply(this,u[h]);"prerender"===o.visibilityState?o.addEventListener("visibilitychange",function(){t||"visible"!==o.visibilityState||(t=!0,a())}):a()}catch(e){(new Image).src=r+"/api/error?message="+encodeURIComponent(e.message)}}(window,"<%= base_url %>");
\ No newline at end of file

priv/tracker/js/plausible.js

-!function(r,i){"use strict";var o=r.location,s=r.document,e=s.querySelector('[src*="'+i+'"]'),l={domain:e&&e.getAttribute("data-domain")||o.hostname};function u(e){console.warn("[Plausible] Ignore event: "+e)}function t(e,t){if(/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/.test(o.hostname)||"file:"===o.protocol)return u("running locally");if("prerender"===s.visibilityState)return u("prerendering");var n={};n.n=e,n.u=o.href,n.d=l.domain,n.r=s.referrer||null,n.w=r.innerWidth;var a=new XMLHttpRequest;a.open("POST",i+"/api/event",!0),a.setRequestHeader("Content-Type","text/plain"),a.send(JSON.stringify(n)),a.onreadystatechange=function(){4==a.readyState&&t&&t.callback&&t.callback()}}function n(){t("pageview")}try{var a,c=r.history;c.pushState&&(a=c.pushState,c.pushState=function(){a.apply(this,arguments),n()},r.addEventListener("popstate",n));var p=r.plausible&&r.plausible.q||[];r.plausible=t;for(var d=0;d<p.length;d++)t.apply(this,p[d]);n()}catch(e){(new Image).src=i+"/api/error?message="+encodeURIComponent(e.message)}}(window,"<%= base_url %>");
+!function(i,r){"use strict";var s=i.location,o=i.document,e=o.querySelector('[src*="'+r+'"]'),l=e&&e.getAttribute("data-domain"),t=!1;function n(e,t){if(/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/.test(s.hostname)||"file:"===s.protocol)return console.warn("Ignoring event on localhost");var n={};n.n=e,n.u=s.href,n.d=l,n.r=o.referrer||null,n.w=i.innerWidth;var a=new XMLHttpRequest;a.open("POST",r+"/api/event",!0),a.setRequestHeader("Content-Type","text/plain"),a.send(JSON.stringify(n)),a.onreadystatechange=function(){4==a.readyState&&t&&t.callback&&t.callback()}}function a(){n("pageview")}try{var c,p=i.history;p.pushState&&(c=p.pushState,p.pushState=function(){c.apply(this,arguments),a()},i.addEventListener("popstate",a));var u=i.plausible&&i.plausible.q||[];i.plausible=n;for(var d=0;d<u.length;d++)n.apply(this,u[d]);"prerender"===o.visibilityState?o.addEventListener("visibilitychange",function(){t||"visible"!==o.visibilityState||(t=!0,a())}):a()}catch(e){(new Image).src=r+"/api/error?message="+encodeURIComponent(e.message)}}(window,"<%= base_url %>");
\ No newline at end of file

tracker/src/plausible.js

@@ -6,14 +6,10 @@
 
   var scriptEl = document.querySelector('[src*="' + plausibleHost +'"]')
   var domain = scriptEl && scriptEl.getAttribute('data-domain')
-
-  function ignore(reason) {
-    console.warn('[Plausible] Ignore event: ' + reason);
-  }
+  var pageVisible = false
 
   function trigger(eventName, options) {
-    if (/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/.test(location.hostname) || location.protocol === 'file:') return ignore('running locally');
-    if (document.visibilityState === 'prerender') return ignore('prerendering');
+    if (/^localhost$|^127(?:\.[0-9]+){0,2}\.[0-9]+$|^(?:0*\:)*?:?0*1$/.test(location.hostname) || location.protocol === 'file:') return console.warn('Ignoring event on localhost');
 
     var payload = {}
     payload.n = eventName
@@ -42,6 +38,13 @@
     trigger('pageview')
   }
 
+  function handleVisibilityChange() {
+    if (!pageVisible && document.visibilityState === 'visible') {
+      pageVisible = true
+      page()
+    }
+  }
+
   try {
     var his = window.history
     if (his.pushState) {
@@ -57,13 +60,18 @@
     window.addEventListener('hashchange', page)
     {{/if}}
 
+
     var queue = (window.plausible && window.plausible.q) || []
     window.plausible = trigger
     for (var i = 0; i < queue.length; i++) {
       trigger.apply(this, queue[i])
     }
 
+    if (document.visibilityState === 'prerender') {
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+    } else {
       page()
+    }
   } catch (e) {
     new Image().src = plausibleHost + '/api/error?message=' +  encodeURIComponent(e.message);
   }