Implementing Better Visitor Analytics

Pacific Northwest Drupal Summit 2018

Presented By

Geoff Appleby

https://gapple.github.io/presentation-better-analytics/

Create
Require
Set
Send

Create

trackingId:	{string}
cookieDomain:	{string}


								ga('create', 'UA-107047227-2', 'auto');

Require

plugin:	{string}


								ga('require', 'linker');

Dimensions

Set

key:	{string}
value:	{string}


								ga('set', 'dimension1', 'article');

Metrics

Set

key:	{number}
value:	{number}


								ga('set', 'metric1', 2);

Pageview

Send

title:	{string}	optional
location:	{string}	optional
page:	{string}	optional


								ga('send', 'pageview');

Events

Send

category:	{string}
action:	{string}
label:	{string}	optional
value:	{number}	optional


								ga('send', 'event', 'video', 'play', 'cats.mp4');

User Timings

Send

category:	{string}
var:	{string}
value:	{number}
label:	{string}	optional


								ga('send', 'timing', 'resource', 'get', 100);

Social

Send

network:	{string}
action:	{string}
target:	{string}


								ga('send', 'social', 'twitter', 'tweet', 'articles/give-it-a-go-and-grow-your-own-herbs');


						<script>
							window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;

							ga('create', 'UA-XXXXX-Y', 'auto');
							ga('set', 'dimension1', 'article');
							ga('send', 'pageview');

							jQuery('video').on('play', function () {
								ga('send', 'event', 'video', 'play', 'cats.mp4');
							});

						</script>
						<script async src='https://www.google-analytics.com/analytics.js'></script>

OOP
Content Security Policy

Demo

umami_ga.module


						var startTime = new Date();

						jQuery.get('/resource')
							.done(function () {
								var endTime = new Date();
								var duration = endTime.getTime() - startTime.getTime();

								ga('send', 'timing', 'resource', 'get', duration);
							});


						ga('send', 'event', {
							eventCategory: 'video',
							eventAction: 'play',
							eventLabel: 'cats.mp4',
						});


						jQuery('body').on('click', 'a', function (event) {
							var href = $(this).attr('href');

							if (
								!href.match('^(\d+):\/\/')
								||
								href.match('^(https?):\/\/' + window.location.host)
							) {
								return;
							}

							ga('send', 'event', {
								eventCategory: 'Outbound Link',
								eventAction: 'click',
								eventLabel: href,
								transport: 'beacon'
							});
						});


						jQuery('body').on('click', 'a', function (event) {
							var href = $(this).attr('href');

							if (
								!href.match('^(\d+):\/\/')
								||
								href.match('^(https?):\/\/' + window.location.host)
							) {
								return;
							}

							event.preventDefault();

							ga('send', 'event', {
								eventCategory: 'Outbound Link',
								eventAction: 'click',
								eventLabel: href,
								hitCallback: function() {
									document.location = href;
								}
							});
						});

gappleca