Setting up Google tag manager to monitor button clicks.

Introduction.

Individual button clicks can be tracked by Google tag manager in conjunction with a Google analytics account. They are recorded as events in Google analytics. This tutorial is a step by step guide to setting up Button click monitoring.

A set of variables are setup in tag manager, these act as hooks that are used to detect a click. A variable example is “Click Text” this contains the text of the button. Other variables include the URL of the link. These are built into tag manager. In this case the button text is Click Me.

Next a “trigger” is set, this compares the value of the variable with a comparison variable. for example if the comparison variable is “click me” and the actual button text matches this, then the trigger fires.

Finally a new tag is created that links the trigger to google analytics, creating a specific event that can be tracked in Google analytics events section.

This tutorial assumes that you have the following already setup

  • A Google tag manager account for your site
  • A Google analytics account for your site
  • A Google analytics base tag setup in tag manager
  • The Google analytics tracker code installed on your web site.
  • The Goggle tag assistant plugin installed on the chrome browser

Step 1 – enable the click variables in tag manager

Tag manager has a set of built in variables ,the click variables need to be enabled.

Click on variables in the tag manager interface, then on configure at the top right. Ensure that all the click variables are checked. Then click on the close ( X ) icon. Tag manager will now create the variables and add the data from the links on your site to them.

Check the variables by using tag managers preview mode.

Step 2 – setup a trigger.

Click on triggers in the tag manager interface. Then click on new.

  • Name the tag, at the top
  • Ensure that click is set to just links
  • Ensure that some link clicks is checked
  • In the drop down ensure that Click Text is selected, this will use the text of the button as the item to compare to.
  • Type the text of your button as the comparison text, in this case Click me

Step 3 – setup the tag

  • Set the tag type to Goggle analytics
  • Set the category to the button name, this will be displayed by google analytics
  • set the action to click
  • Set the label to use the click text variable
  • Check the enable overriding setting check box and enter your analytics tracking ID or set this up as a variable. The tracking ID is used to associate the click event with your analytics account.
  • Close the dialog window

To check that the tag is working Go to google analytics and click on the events section. Ensure that the date range is set to the current day. Test click the button a few times. The event category should match the category that you set in the tag. Click on event action and it should say click.

Debugging

You can find any errors by using the preview mode in tag manager. From the overview page click on the preview button

An orange banner will appear indicating that you are in preview mode. Preview mode puts the browser into a state where you can check for any active tags on a page or site.

Go to the page where the monitored button is and refresh the page. A window will open at the bottom. Here there is a lot of useful information that tells you which tags are present and their status.

Click the monitored button, hold down the control key so that it will open in a new tab, and it should show up in the left hand panel as having fired.

Click on the link that says link click and the status will be displayed. At the top a tab will show any errors.

Click on the variables tab and this will show the content of all the available variables on the page.Here the click text (button text) is shown as Click me the actual button text. it also shows the trigger that was set up earlier.

Tag manager plugin.

Finally if you are using the chrome tag manager plugin, the click will show up as an event under the global analytics tag. click on the event link to see a breakdown of the event.

Leave a Reply

Your email address will not be published. Required fields are marked *