How to Install Multiple Analytics Scripts Through Google Tag Manager

On with 0 Comment
We often install multiple custom code and scripts within our web pages to track, analyze or to add some functionality. The traditional way to do this is to paste each of the custom script separately at different locations. This is not only cumbersome, but sometimes also results in bloated code due to synchronous loading of some of the scripts. The end result is sluggish website with bad user experience. Fortunately, a powerful tool called Google Tag Manager can makes things easy when it comes to maintaining multiple custom scripts on a website. Today, we're going to learn how we can use this service to combine several web analytics script in a single container. This not only encapsulates and hides the script code, but also helps in improving the page loading speed. I'll combine Google analytics and StatCounter scripts to present an example.

Create a Container

While using Google Tag Manager, you need to create containers to host multiple scripts and tags within each one of them. A container simply combines multiple tags within a single package and asynchronously fetches them during web page loading. You should group common types of scripts within one container. This makes the maintenance and update process much easier.

GTM container anatomy

So, let's quickly see how we can make a container for the example we're going to discuss in this post. Log in to your tag manager account and click 'New container' button. This will prompt you to provide some of the basic details for your container as shown in the image below.

GTM container creation process

Provide a meaningful and descriptive name such that it reflects the primary purpose of the container. Since I'll be using this container to install various analytics scripts, I've chosen a relevant name for it. Provide the correct time zone of the administrator who'll be maintaining the tag account on a regular basis. And last but not the least; provide the complete URL of the home page of your website. Remember, if you use secure HTTP protocol on your site, you must select the right option from the drop down list. Now our container is ready and it's time to move on to the next step of creating separate tags for both the scripts that will be included in this container.

Create Google Analytics Tag

First we'll create a tag for our Google analytics script. Click the 'New Tag' button to start the process. While creating this tag, you have to provide several parameters to configure it correctly. Google tag manager natively supports Google analytics tag for easy configuration. Here's how to configure the entire tag.

GA tag parameters
Google analytics tracking ID

Start with giving a proper name to your tag. The name should be such that one can immediately know the purpose of the tag simply by glancing at its name. Next step involves the selection of the type of tag you want to create. As I mentioned before that GTM natively supports Google analytics tag so you should select that from the drop down list. This will ensure that you get all the additional and advanced customization options for your analytics script.

Now comes one of the most important step of providing the tracking ID for your analytics script. You can find that out from the existing script already embedded in your blog or website code. You can see it in the image above pointed by a red arrow. Simply copy that ID and paste it in the appropriate field.

GTM tag firing rule configuration

There are two more important parameters that need to be configured before you can save your tag. The first one asks you about the event on your website that activates the tag. For general non eCommerce websites, page view is the best option. If you're tracking a sales funnel or specific links or content sections, you can select other available options.

Right after that, you need to create a rule that acts as a trigger for activating your tag. As soon as you'll click the button for creating a new rule, you'll find a pre-configured 'All Pages' condition in the dialogue box. Select it for your rule and it will ensure that your Google analytics tag is active on each page view of your website. Now save it and move on to the next step of creating one more tag for hosting your second analytics script. In our example, I'm using a script from StatCounter analytics service.

Create StatCounter Analytics Tag

Since I use StatCounter as the second web analytics script on all of my blogs, I've included it in this post's example. There's a slight difference in how you create a container tag for 3rd party scripts and custom code. Before you start configuring this tag, copy the script code in your clipboard either directly from your web page's source or from your 3rd party analytics account.

GTM HTML tag configuration

Start with providing a name to your tag and move on to selecting the right kind of tag you want to create. This time we have to select 'Custom HTML Tag' to configure our StatCounter script tag. Whenever you're using any custom HTML code or any 3rd party script that doesn't produce any kind of visible changes to the web page, you must use this tag.

Thereafter, you can paste your script code in the provided large HTML text box. This follows the same rule creation process discussed in the previous section. Again use the ready made 'All Pages' trigger so that your second script is also activated for every single page view on your website. Save the tag and now your both script tags are ready and are included in your container.

Install Container on Your Website

Now that your both script tags are properly configured within the container, it's time to install the GTM container on your live website. You must remove all your existing analytics code present in the web pages on your website. Now click the 'Create Version' button on your container page.

You'll be presented with two primary options that facilitate easy installation of the container. The first option lets you save and publish your container straightaway for immediate implementation. The second and more useful option lets you first test the functioning of the container without publishing it.

GTM contained script code

It's always good to first preview, test and debug the functioning of your container so that you can be assured that all the tags are working properly as intended. Once you're satisfied with the test you can save and publish it and can grab the container code that needs to be pasted within your website's every web page. You must paste this code right after the opening <body> tag on every web page.

Once installed, you can see two things immediately. First, you will notice removal of latency introduced due to 3rd party synchronous scripts, and second you will find that now all your analytics and custom scripts are well encapsulated in a single Google tag manager container script.

This useful tool provides several other advanced features that can be leveraged very easily to get more out of your website. You can explore and can try out various other powerful options present in this free and useful Google service.

0 comments:

Post a Comment