I like Google Tag Manager and Squarespace for the same reason: they simplify and streamline the processes website design and Google Analytics implementation while maintaining power and functionality of the product. For the old sliced bread analogy, they are the greatest things to come along since the knife.
Squarespace is a great plug-and-play, drag-and-drop Content Management System (CMS). It allows users to easily add all kinds of content in a simple non-technical way.
Google Tag Manager is a Tag Management System for Google Analytics . (You could say TMS but nobody does.) It allows for on-page tagging and most other advanced analytics capabilities of Google Analytics. It greatly minimizes technical implementation and actual code that must be added to a website in order to track user interaction. Its semi-technical, in fact, it’s still pretty technical but once the code is implemented by your friendly webmaster or neighborhood hacker, the backend is pretty accessible to fairly tech savvy person. I recommend checking out this short Google Tag Manager video to get a basic understanding of its features and capabilities. When I watched it, it blew my mind, but then again, I love analytics.
“Stepping Into” Google Tag Manager
That clever heading is a JavaScript joke. Don’t worry if you don’t get, I wouldn’t have either until this year. If you do, then you are in pretty good shape to follow this guide. To get you up to speed, here are a few great references to learn what’s going on with the technical side of the following implementation.
If you were to do this from scratch, you would need a basic understanding of JavasScript, HTML, CSS and jQuery. Actually, since Squarespace uses YUI instead of jQuery you will have to also understand YUI. I’ll explain later. You can find everything you need to know about learning how to code here.
For the YUI to jQuery translation, use jsrosettastone.com. It does exactly what it sounds like: lists translations of all the functionalities of jQuery into YUI.
For help, references use Google Tag Manager Help, Squarespace Developer Center and the Holy Grail: stackoverflow.com if you ever get hung up.
Step 1: Get Your Google Tag Manager Account and Container
Now that you are a technically proficient hack, let’s dive in!
This has been covered many times so I will let Google take it from here. Go to Google Tag Manager’s website and follow steps 1-3. Do not follow step 4! Do it yourself!
Also check out Justin Cutroni’s extremely helpful guide for setting up your account.
Step 2: Insert the Container and Initialize the Data Layer
This is where the fun starts; the beginning of analytics tracking glory!
Inserting the Container:
Google Tag Manager documentation recommends that you place your container just below the opening body tag. One way to do this is by adding the container into a code block at the top of each page, but that is just a lot of work. Instead, the functional alternative, which works just as well, is “injecting” the container in the header section.
Initializing the Data Layer:
The container is the brain that runs Google Tag Manager on your site but it doesn’t really do anything too special without the data layer.
You will also have to insert a bit of code above the container to initialize the data layer. Technically, this bit of code creates an empty data layer object, which will be filled as user interactions push information to the data layer array. The code looks like this:
<script>
dataLayer = [];
</script>
<!-- Google Tag Manager -->Step 3: Insert Code to Push Events to the Data Layer
Edit: Now much of this can be handled by Google Tag Manager’s auto-event listeners.
This method of event tracking offers the agility that differentiates GTM from previous methods of Google Analytics event tracking. It is truly where the magic happens.
Inject this snippet of javascript into the footer. This way loading the script will not slow downloading the visual elements of the page.
This snippet of code says, “every time a user clicks a link to a social media site, I will push the corresponding key/value pair to the data layer. Most commonly this is done using jQuery, but Squarespace uses YUI so you have to play the game between the lines.
<script>
YUI().use('event', 'node', function(Y) {
// (1) These variables reference the 'class' link attribute.
// Each social media site link has its own 'class' attribute.
// Note that by using an element class rather than element id,
// any button that shares that class will fire the GTM rule
// triggerd by that class.
var twitterLink = Y.all('a.social-twitter');
var gPlusLink = Y.all('a.social-google');
var linkedInLink = Y.all('a.social-linkedin');
// (2) The 'socialView' function tracks a button click event (2a)
// then pushes a corresponding data layer variable to the data layer. (2b)
var socialView= function(socialLink,socialClick){
socialLink.on("click", function(e){ //(2a)
dataLayer.push({'event': socialClick}); //(2b)
//These are logs I used for debugging:
console.log(socialLink + " has been clicked");
console.log(socialClick + " was pushed to the datalayer");
})
}
// (3) Finally, 'socialView' (2) is called for each link class variable (1).
// This pushes a data layer value (2b) into the "key : value: pair below.
socialView(twitterLink, "twitterClick");
socialView(gPlusLink, "gPlusClick");
socialView(linkedInLink, "linkedInClick");
});
//edit: that last bit is pretty sub-par code.
</script>Step 4: Setup Tag
Manager Rules and Tags
The Google Tag Manager interface is not immediately intuitive so give yourself some time to play around with it. Once you get lost in it, you will be amazed by the power it provides.
For this example, we will go through event tracking on the Google+ button on the footer of each page. This will also track any button click for any other button with a designated div “class” attribute of “social-google.” I use the “class” attribute because my intent is to measure navigation to my social media profiles rather than on-page UX button testing. This can be modified pretty easily to track other events. Let me know if you have questions.
Part 1: Setup the Tag
This tag measures both an Event or Social Event and a Custom Dimensions. This way its possible to track navigation to my Google+ page in aggregate and also at the visitor level.
Part 2: Setup the Rule to fire the Tag
We are tracking a JavaScript event, not to be confused with a Google Analytics event so we use the {{event}} macro to trigger the rule. When the {{event}} matches the string assigned as the data layer variable.
Note: The {{event}} macro must exactly match the data layer and sure that the match is case sensitive!
In the case of the Google+ button, the data layer variable is “gPlusClick.”
Part 3: Create a Container Version
Create a version of your container. Name your container version with a specific and consistent naming convention. This will really help in keeping track of progress and contained tags.
Step 5: Debugging and Google Analytics Real-Time Feature
Good job so far!
Now, to makes sure this is all working properly, preview the new container version. There are few ways to check if your tags are working. First preview your container in “Preview and Debug” mode. If the tags are firing on the target user interaction publish the new container and use the Real-Time feature in Google Analytics to make sure that the virtual pageviews and/or events are being reported properly.
If you followed this whole process or you managed to customize your own event tracking, give yourself a pat on the back! If you have any questions, please comment below or reach me on Twitter.