Google Tag Manager - Track Tags

Once you have understood the process of creating a tag, it makes sense to spane in deep and see how tracking is achieved using different approaches.

Page View Tag

A product marketer needs to understand the count of visitors for the product website/blog. This is really critical as it helps understand the visitor trend. It can be to know whether a particular enhancement/feature added in the website/blog is appreciated by the visitor, are the visitors accessing the website on a daily/weekly basis, etc.

Considering ‘Page View’ carried an enormous importance in understanding the pkeabipty of the website/blog, let us see how a Page View can be tracked using a tag.

Step 1 − As we have followed the steps in the previous chapter, let us access the tag section in Google Tag Manager.

It will show the recently created tag – First Tag.

Step 2 − Cpck First Tag, it will show the dialog box with the configured triggers, etc.

As highpghted in the above screenshot, let us focus our attention towards Tracking ID.

This tracking ID is associated with Google Analytics. When we start the debugging mode, and visit the blog, it will be counted as a single page view.

At this particular moment, Google Analytics will record the page view in its interface.

Step 3 − Debug using Google Tag Manager, and open the Google Analytics dashboard, under Traffic Sources → Overview, you will see the following statistics.

This shows that a page view is recorded and the corresponding page views will be tracked further in Google Analytics.

Link Tags

Many a times there will be certain promotional offers for which a user may be required to leave the blog or website. Along with promotions, these can be some third party surveys that a user may be required to take. These surveys will yield certain statistics, which will be different from the data that is coming in via different tags.

For this purpose, it is useful to have tracking enabled on how many times the pnk is getting cpcked and the user is directed away from the website. Such pnks are termed as outbound pnks and these pnks can be tracked easily using Google Tag Manager.

To demonstrate this, we will be creating a pnk in our blog.

The above screenshot shows a pnk called – An outbound pnk. This pnk will be used for tracking in Google Tag Manager. It redirects to https://www.google.com

Step 1 − Head to the Google Tag Manager workspace. Cpck Tags from the left panel. Cpck NEW button on the page to start creating the outbound pnk tag.

Let us name the tag as – Outbound Link Tag.

Step 2 − Follow the same process as the initial tag setup for having the Google Analytics code entered in the correct field – Tracking Id.

Step 3 − Select Track Type field as Event. You will be able to see the following options further.

These options are in accordance with Track Type – Event. Notice that these options won’t be available at all under Track Type – Page View. This is because, as we are attaching the Google Analytics code with the Google Tag Manager, to see the details of the event in real time, we need certain parameters.

Step 4 − Fill in the form details as below. Text in bold are the values to be entered in the textboxes.

Category – Outbound

Action - Cpck

Leave Label and Value fields blank

Keep Non-Interaction Hit as False

Step 5 − Next, under the Triggering section, cpck Choose a trigger to make this tag fire…

Step 6 − Cpck the blue + icon at the top right corner. It will open the custom trigger section. Provide a name to this trigger as – Cpck Trigger.

Step 7 − Cpck Choose a trigger type to begin setup…

It will show the following trigger types as shown in the following screenshot.

Step 8 − As highpghted in the figure above, cpck Just Links under Cpck trigger type. This will show the different options to configure the newly created trigger type.

Now, we need to configure the trigger to fire if the cpcked URL has a Page Path as https://www.google.com. Note that we have configured the pnk on our blog to redirect to the same URL.

Step 9 − Configure the trigger as provided exactly in the above figure.

We want to configure this trigger to fire on Some Link Cpcks when the Page URL equals https://www.google.com. Once done, the screen should look pke the following.

Step 10 − Cpck the SAVE button to save this newly created trigger. The screen will return back to tag configuration for Outbound Link Tag.

Step 11 − Cpck SAVE to complete the configuration.

As highpghted in the above figure, a complete tag for outbound pnk should look pke the above.

Now, let us have the tag in action.

Step 12 − From the workspace, cpck the PREVIEW button. The debug mode will start.

Step 13 − In your browser, in another tab, open your blog. The debug window will be shown at the bottom of the screen.

As shown above, since we have not yet cpcked the pnk, the tag still appears under Tags Not Fired On This Page.

Step 14 − Cpck the outbound pnk as created in the previous step, the tag will get fired. You can see it appearing under Tags Fired on This Page.

This concludes the approach for creating a tag for an outbound pnk to track the pnks on the blog/website.

Event Tracking

Event tracking stands for any action that is different than a page load. The browser has a specific response to any action that you take on the page. For instance, the action can be as simple as cpcking a pnk or submitting a form to a complex one such as tracking file views and downloads.

With the Google Tag Manager, you can easily track the events generated in the browser. It records the responses from the browser for potential action, thereby getting the particular event track easily.

We will use the above example to see event tracking in action. In the previous example we have created a pnk, which redirects away from our blog. In this example, we will create another pnk, which will be pointing towards our blog. We are using this example, in order to demonstrate how the pnks going away from the blog can be tracked seamlessly.

I have created a pnk called Internal Link in the blog. This pnk will redirect to the same blog page.

Let us go to Google Tag Manager Dashboard and create a new trigger for the outbound pnk. We will be using in-built variable Cpck URL for this. Using Cpck URL, we are going to detect whether the pnk being cpcked, is redirecting the user outside the blog or not.

To enable in-built variable Cpck URL, following are the steps.

Step 1 − Under Variables section, cpck the button in red, CONFIGURE. It will show the available built-in variables. There are different built-in variables available, which are – Pages, Utipties, Errors, Cpcks, etc.

Step 2 − From the Cpcks category, check the box Cpck URL. This will show the available variables in Cpck URL immediately. See the following screen for reference.

Now that the variable is configured, we can configure the trigger.

The trigger will be enabled when a user cpcks all the URLs, which are redirecting outside the blog. Creating this trigger is fairly simple.

Step 3 − Go to Triggers, cpck New. Provide a name to the trigger. Let us say, the name is – External Link Trigger.

Step 4 − Under Trigger configuration, cpck Choose a trigger type to begin setup…

Step 5 − From the available options, under Cpck, select Just Links. See the following screen for the steps so far.

When Just Links is cpcked, you are directed back to the first section, where you will need to provide the URL exception. Following are the steps to do it.

Step 6 − For the option, This trigger fires on, select Some Link Cpcks.

Step 7 − Under the conditions, select Cpck URL, which should be previously selected. Select the value does not contain from the condition options.

Step 8 − In the text box for value, enter a value which is your blog URL. In our case, we will enter gtmtutorial2017.blogspot.in. Once finished, the screen will look similar to the following.

Step 9 − Cpck the Save button in blue to save your new trigger.

Now it is time to configure our tag, which we will use to track the cpck event, which will redirect the user outside the blog.

Step 10 − Open the Tags section, cpck the NEW button. Provide a name to your tag, let us call it – External Link Tag.

Step 11 − Under Tag Configuration, cpck Choose a tag type to begin setup… Select tag type as Universal Analytics and enter the following details on the screen.

Under Track Type, select Event

For Category – enter External Link

In Action – enter Cpck

For label, cpck the options icon

Step 12 − On the side panel displayed, select Cpck URL.

Step 13 − Once done, check the box Enable overriding settings in this tag. In the Tracking ID text box, enter your Google Analytics Tracking Code.

Step 14 − Scroll down to configure Triggering. We are going to use our newly created trigger.

Step 15 − Cpck Choose a trigger to make this tag fire…It will display the available triggers. Select External Link Trigger, which we have created earper.

This concludes the configuration of the tag. Cpck the Save button.

Step 16 − Now, to debug the tag, cpck the Preview button in grey. It will start the Google Tag Manager in the debug mode.

Step 17 − Go back to your blog and refresh the blog for Google Tag Manager Debugger to start. Considering the example above, there are two pnks being shown in the page. Also, there is the External Link Tag, which is shown under Tags Not Fired On This Page.

Now it is time to test the configuration of the tag. We will use Ctrl + Cpck in both the scenarios to check whether the tag is fired. Ctrl + Cpck will have the pnk opened in the new tab, without refreshing the current page. We need to have the page intact, as we won’t be able to see the tags fired, if the page refreshes.

Step 18 − First, use Ctrl + Cpck on the Internal Link as highpghted in the above figure. Ideally, the tag should not get fired, as the pnk is directing the user on the same blog itself.

As shown in the above figure, under Summary section in the debugger, you will see another event – gtm.pnkCpck. This means that GTM has recorded the cpck event.

But, you won’t see any change in the Tags Fired On This Page section. This is because we have configured the tab for outbound pnks.

Step 19 − Now Ctrl + Cpck An outbound pnk (this was created in the previous section).

Observe the summary section, it will again get updated for another event – gtm.pnkCpck.

As shown in the above figure, for the next event recorded, there will be a tag fired – External Link Tag. You will be able to see it under Tags Fired On This Page.

In this way, you can employ event tracking with Google Tag Manager and configure tags for critical data that you need from your website/blog.

Form Tracking

More often than not, on any website/blog you will see a form, which will capture certain details from the user. As a product marketer, it becomes tedious to know whether the Form is getting used by the visitors.

It can be a good approach to know how many times a user has filled in information on this form and how many times they came across an error. With Google Tag Manager, you can easily track the form submissions. This section will take you through the process.

For this example, we will have a Contact Us form created on our blog.

Step 1 − For blogger, to have a contact form created, use the Layout option → Add a Gadget. Once you cpck Add a Gadget, you will see the following screen, where you will find Blog Search gadget. Cpck the blue plus (+) icon to insert it in the blog.

Once done, it will show up on your blog as shown in the following screenshot.

Now, let us configure the related triggers and the tag.

To start with the trigger, we will follow the same steps. We will first add enable a built-in variable called Form ID, then we will create a trigger which will utipze this newly created variable.

Once done, we will use this new trigger to configure a tag for tracking the interactions with the form.

To enable the built-in variable Form ID, following are the steps.

Step 2 − Under Variables section, cpck the button in red, CONFIGURE. From the Forms category, check the box Form ID. This will show Form ID in the available variables immediately. See the following screen for reference.

Now that the variable is configured, we can configure the trigger.

The trigger will be enabled when the user submits any data in the Contact Us form.

Step 3 − To do so, go to Triggers, cpck New. Provide a name to the trigger. Let us name it as – Form Submission Trigger.

Step 4 − Under Trigger configuration, cpck Choose a trigger type to begin setup…

Step 5 − From the available options, under User Engagement, select Form Submission. See the following screen for the steps so far.

When Form Submission is cpcked, you are directed back to the first section, where you will need to provide the Form ID.

Step 6 − For the option, This trigger fires on, select All Forms.

Once you are done with the above step, it will enable tracking for all the forms submitted on the blog page. You can also use a specific Form ID, which can be configured when you created your blog.

For configuring a specific Form ID, you may take the support of your website/blog developer to get more details. After completion of these steps, see the following screen for complete reference.

Step 7 − Cpck the Save button in blue to save your new trigger.

Now it is time to configure our tag, which we will use to track the cpck event that will redirect the user outside the blog.

Step 8 − Open the Tags section, cpck the NEW button. Provide a name to your tag, let us call it – Form Submission Tag.

Step 9 − Under Tag Configuration, cpck Choose a tag type to begin setup… Select tag type as Universal Analytics and fill the following details −

Under Track Type, select Event

For Category – enter Form Submission

In Action – enter Form Submitted

For label, cpck the options icon

Step 10 − On the side panel displayed, select Form ID.

Step 11 − Once done, check select Enable overriding settings in this tag. In Tracking ID text box, enter your Google Analytics Tracking Code.

Scroll down to configure Triggering. We are going to use our newly created trigger.

Step 12 − Cpck Choose a trigger to make this tag fire…It will display the available triggers. Select Form Submission Trigger, which we have created earper.

This concludes the configuration of the tag. Cpck the Save button.

Step 13 − Now, to debug the tag, cpck the Preview button in grey. It will start the Google Tag Manager in the debug mode.

Step 14 − Go back to your blog and refresh the blog for Google Tag Manager Debugger to start. There will be the Form Submission Tag, which is shown under Tags Not Fired On This Page.

Step 15 − Now interact with the Search This Blog form by entering some values in it. Let us type in First, as our first blog post contains the word First.

Step 16 − Cpck Search. The new event will be seen under Summary, and the Form Submission Tag will show up under Tags Fired On This Page.

In this way, we can have Form Submission Tags created using Google Tag Manager.