Setting up Google Tag Manager and Analytics on WordPress

Google Tag Manager is an application that allows you to place any number of tracker codes on a site by using just one universal base tag. New tags are created in the web interface and tag manager takes care of the rest.

This tutorial covers setting up Tag Manager along with Google Analytics. It assumes that you already have an analytics account.

Environment setup

There are a couple of things to keep in mind when installing tag manager code on WordPress.

Firstly, any theme updates will erase the code and secondly some themes hide the editor.

You will need to create a child theme to save any site customisation and the tracker code. This will make the code update proof. Child themes can be created using a plugin. You can also use a text editor and then upload the child theme to your themes folder.

You will need access to the editor to add the tracker code to the header file. If the editor is hidden you will need access to your WordPress root folder to edit the config file. You can use C-panel or your hosting companies control panel for this.

Child themes – using a plugin

Go to the plugins page in the WordPress Back end and search for child themes . Install the plugin, Child Theme Configurator . Unlike some plugins this one transfers any customiser settings to the new child theme.

Step 1 / Install the plugin and activate it. The settings for the plugin are under Tools > child themes. Click on this to go to the settings page.

Step 2 / Click on analyse and follow any recommendations.

If you have any custom menus or other settings, check the box shown below to import them to the new theme. Then click on create new child theme.

Step 3 / Go to Appearance > themes and activate the new child theme.

Step 4 / Click on Tools > child themes to return to the plugin’s settings page and click on the files tab. Check the Header file check box and then click on copy selected to child theme. this will put a copy of the header file in your child theme. Any changes to this file will override your main theme’s header file.

Step 5 / Go to Appearance > theme editor and you should see the copied file. This is where you place the tag manager code so that it will not be overridden by any theme updates. If you cannot see the theme editor see below

Finding the theme editor

The theme editor allows you to edit the theme’s files from the WordPress back end.

In some themes the editor is hidden. That is, you will not see it listed under the Appearance menu. To bring it back you need to edit the wp_config file.

Note : If you do not have access to your hosting company site you will need to get your web master to enable the editor.

login to your hosting company’s site and go to your webspace (webspace explorer). I use 1 &1 Ionos , however C-panel is the most common interface used by hosting companies.

Go to the root folder for you site and open wp_config.php.

On line 5 where it says disallow file edit, change true to false. This will enable the editor. Now, save the file. Go back to WordPress and the editor should be available.

Tag manager setup and install

Go to your Tag Manger account or sign up for a new one. The default page in the tag manager interface is the overview, shown below. I use a separate account for each web site or business. You can have any number of accounts.

Create a base tag

From the overview page click on new tag, click on tag configuration and select Google Analytics Universal Analytics.

The tag type dialog box will open, set the track type to page view.

The Google analytics settings box is where you put the tracking code from your analytics account. Here you should use a variable, see below. Name the tag Google – base – tag ,save it for now, while you create the variable.

Finding the Google Analytics tracker code and adding it to a variable in Tag Manager.

Go to your analytics account. Click on the cog at the bottom left to bring up the Admin menu. Click on Tracking info > tracking code and copy it.

In Tag Manager click on variables. Click on new under user defined variables. Then click on variable configuration.

Under variable type choose google analytics settings.

Paste in the tracking code and click save. Don’t forget to name the variable. Once this variable is saved go back to the tag you created above and use the drop down to select the new variable . Finally click on submit to make the changes live , you will need to do this every time you change something.

Installing the Tag Manager base tag code on your site

To install the code click on the Account ID at the top right of the Tag Manger overview or tag page. This will bring up the tracker code.

Your child theme should have been setup and the header file copied, see above. Go to the editor and open the header file. Copy the section of code that should go at the top of the head section and paste it in place. Scroll down the page and paste the other code block just after the opening body tag. save the file,now its time to test the tag.

Testing the base tag

The easiest way to test that the tag is working is to put tag manager into preview mode. Click the preview button at the top of the interface.

Preview mode puts the chrome browser into a state where if you refresh the page on the site you are adding the tag to, a dialog box will slide up from the bottom. The dialog contains a wealth of information about any tags that are present.

An orange banner will appear telling you that you are in preview mode.

Go back to your site and refresh the page. The tag should be listed with no errors.

Leave a Reply

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