Skip to content

The Google Analytics Tracking Engine makes it easy to collect event data where traditional tracking methods may not have been possible.

License

Notifications You must be signed in to change notification settings

peterburdette/Google-Analytics-Tracking-Engine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Google-Analytics-Tracking-Engine

The Google Analytics Tracking Engine makes it easy to collect event data where traditional tracking methods may not have been possible. This tracking engine utilizes Google Tag Manager and Google Analytics to capture events and is run on the client side. All events can be seen in Google Analytics (Behavior > Events > Top Events).

Getting Started

Installation

Add the latest JQuery and Google Analytics Tracking Engine scripts to the header of your site.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
// Fetches redirects.txt and stores information in the variable data
$.get('redirects.txt', function(data) {
	// Fetches the parameters of the query string and stores the path in urlParams
	var urlParams = [];
	// Sifts through the string and removes unwanted characters
	(function () {
		var match,
		pl = /\+/g, // Regex for replacing addition symbol with a space
		search = /([^&=]+)=?([^&]*)/g,
		decode = function (s) { return decodeURIComponent(s.replace(pl, '')); },
		query = window.location.search.substring(1);
		while (match = search.exec(query))
		urlParams[decode(match[1])] = decode(match[2]);
	})();
	// Pulls properties from urlParams and stores them in destination array
	var destination = Object.keys(urlParams).map(function(path){return urlParams[path]});
	// Assigns the redirects.txt data to the userData array
	var userData = data.split('\n');
	// Multidimensional array declaration
	var redirects = [];
	// Fetches the total number of objects in the userData array
	var total = userData.length;
	// Counter variable
	var i = 0;
	// Runs through the redirects array to check to see if there is a string match
	while (i < total) {
		// Places userData into the multidimensional redirects array
		redirects[i] = userData[i].split(' => ');
		// Checks for a path match in the redirects array
		if (redirects[i][0] == destination[1]) {
			window.location.href = redirects[i][1];
			return;
		}
		i++;
	}
	// Redirects to safe page if no match is found
	window.location.href = 'https://example.com';
});

Setup Google Tag Manager

Paste this code as high in the <head> of the page as possible. Make sure to substitute the filler GTM-XXXXXXX with your Google Tag Manager Account ID.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Additionally, paste this code immediately after the opening <body> tag. Make sure to substitute the filler GTM-XXXXXXX with your Google Tag Manager Account ID here as well.

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

NOTE: For more information about installing the Google Tag Manager snippet, check out their Quick Start Guide.

Create Tags/Triggers/Variables

  1. Create a variable — You will need to first create a User-Defined Variable. Go to the Variables page of your Google Tag Manager and in the User-Defined Variables section create a new variable named Tracking ID.

    Give this variable your Google Analytics Tracking ID in the Value field and SAVE.

    Variable Configuration Image

  2. Create a tag — You will need to go to the Tags page in Google Tag Manager and click the NEW button. Fill in the fields so they resemble the screenshot below. Click SAVE when finished.

    Tag Configuration Image

  3. Create a trigger — Finally, you will need to create a trigger. Go to the Triggers page in Google Tag Manager. Once there click on the NEW button and fill in the fields so they resemble the screenshot below. Click SAVE when finished.

    Trigger Configuration Image

    After these configurations have been setup in Google Tag Manager you are ready to add your redirects to the redirects.txt file.

Redirects

To add a redirect open the redirects.txt file. The text linkedin is telling the engine what path it needs to look for in the URL. Immediately following is the separator => which shows the engine where the assigned path should direct the user. New redirects can be added on a new line and there are no limits to the number of redirects that can be added to this file.

// Example Redirect
linkedin => https://example.com

Failsafe

In the off-chance that one of the redirects is not working it is good to have a page that the user can be directed to. You can add in your failsafe page by modifying the window.location.href location that comes immediately after the loop.

// Redirects to safe page if no match is found
window.location.href = 'https://example.com';

Browser Support

Supported Browsers : Chrome, Firefox, Safari, Opera, Edge, IE7+.

License

The source code can be found on github and is licensed under the MIT license.

Developed by Peter Burdette

About

The Google Analytics Tracking Engine makes it easy to collect event data where traditional tracking methods may not have been possible.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published