arnold on Apr 07, 2023
Google Tag Manager is a tool that helps you add and update tags on your website without having to edit code. Tags are small pieces of code that track things like website traffic, conversions, and engagement. With Google Tag Manager, you can add and update tags without having to know how to code. This makes it easy to track the performance of your website and make sure that you are getting the most out of your marketing efforts.
What makes Google Tag Manager (GTM) powerful is that it can be used to track data across multiple platforms. GTM works by creating a container on your website that contains all of your tracking code. This code can then be fired by triggers, which are events that occur on your website. For example, you could create a trigger that fires when a user clicks on a button or submits a form.
GTM can be used to track data from a variety of sources, including:
And many more
GTM also makes it easy to track data from custom sources, such as your CRM system or email marketing platform.
Once you have created your triggers and added your tracking code, you can use GTM to view and analyze your data in Google Analytics. This data can be used to track the performance of your website, marketing campaigns, and other initiatives.
In this article I will first show you how to setup and install Google Tag Manager on your WordPress. We will then setup Google Analytics 4 from scratch and use Google Tag Manager to implement GA4 into our website.
How To Set Up And Install A New Google Tag Manager Account Into Your WordPress Website
First, Make sure you are signed into your Google account and go to tagmanager.google.com
Then click On “Add Account” or “Create Account”
Fill out the form similar to the image below
Next you will have to accept the terms from Google to continue.
You will then be given access to the Google Tag Manager Code For Your Account:
We will need to install the code on our website as requested by Google.
To install this code properly we need the first section of code to go in the <head> of the page and the second section of coder to go after the <body> tag. There are a few WordPress plugins that will help you do this easily but I prefer to use as few plugins as possible on a WordPress site as you need to keep them updated and they could be a possible vulnerability for your website. To avoid using a plugin we can easily use the WordPress editor in our dashboard to edit the header.php file. In this tutorial we are using the mesmerize theme which is a basic theme available to download for free.
To access the editor go to the dashboard of your WordPress website.
Go to APPEARANCE and then THEME FILE EDITOR as shown below.
If you get a warning message then just click I UNDERSTAND.
You will then see the editor section of your dashboard. On the right hand side you will need to select the theme to edit. Since we are using mesmerize that needs to be selected. Scroll down until you find header.php (It may say Theme Header) and click on that to open up the header code.
You should see a screen that looks something like this:
Now we need to simply copy our Google Tag Manager code into the editor. Go back to the tag manager and copy the header code and insert it as shown below. Then copy the body code and enter it as shown below.
Once you click UPDATE FILE it will install the Google Tag Manager scripts into your website.
However, we need to install the GTM scripts one more time because MESMERIZE uses a separate theme file for their homepage. Click on header-homepage.php on the right. Then insert the code one more time as shown below. Then click “Update File” one more time.
Now you can go check the code. Go to your homepage on your website and right click on it. Then select VIEW PAGE SOURCE and you will see the code on your website. Look at the header code and you should see your Google Tag Manager code as shown below.
Sign Up For A Google Analytics Account
The next thing we need to do is set up our websites in Google Analytics. Sign up for a Google account if you do not have one. If you have Gmail then you have a Google account. If you need a Google account then go to this link: https://accounts.google.com/SignUp and get signed up.
Do not use your CSU email or email account. Make sure you are using a @gmail.com account.
Now go to: https://analytics.google.com/
Click Sign Up:
Enter your account name and then click NEXT. You can choose if you want to share info with Google or not.
You may be asked to enter your industry and number of employees. Fill this out however you want and click NEXT.
Next pick some business objectives. These should be specific to your business but for some general objectives you can select the option to “Get Baseline Reports”
You should then see something like this where you can click skip for now:
You will then see this screen where you can click to “Set Up Data Collection”
Since we are going to set up a website property you should click the WEB option below.
Now configure the property as shown below:
The stream in now created and we need to install this into our website. We will install it into our website easily by using Google Tag Manager. Click the option on the screen and click “Install Manually.” Then copy the code in the box.
Navigate back to your Google Tag Manager page. In your Workspace select ADD A NEW TAG.
On the next screen give your tag a name. We are creating a Google Analytics 4 Configuration tag so that is how I named the tag. Once you name the tag click on CHOOSE A TAG TYPE TO BEGIN SETUP as shown below.
Then select Google Tag as shown below.
In the Tag ID you need to enter the G ID . This can be found in the snippet of code we got from Google analytics earlier. You can leave everything else the same in the tag configuration box.
Next click on the Trigger box to set up a trigger to load the Google Tag when someone loads your website.
To ensure that the Google tag fires before other triggers, click Trigger and use the Initialization – All pages trigger.
Your tag configuration should look like the image below. Click the SAVE button to save your tag configuration.
Then click the SAVE button at the top right. Once this is saved we need to test our configuration to make sure it is working correctly. To do this we click on the PREVIEW button at the top right of the screen.
Enter the URL of your website and click CONNECT:
Once we click CONNECT It will load your site to test the tag and on the tag assistant page you will get a screen that looks like the image below. Click CONTINUE.
If everything was connected correctly then your screen will look something like this:
Now we just need to submit our changes. In the top right of your workspace click on SUBMIT.
Fill out your settings similar to the image below:
Next we need to check that our set up worked. We can do this by going to google analytics and checking our real-time traffic.
How To Check Real Time Analytics In Google Analytics
Simply go back to your Google Analytics homepage. You may need to close out your setup screen to get back (do not worry if the setup screen says it is not collecting data. Just close it and go to your analytics home). In the bottom right of the screen you will see your realtime analytics. You can check for traffic here or click View Realtime for more details. You should then load your website and hopefully you see some traffic. If you do not see traffic turn off the WIFI on your phone and then load your website. (This loads the website from a new IP address). You should see some traffic come through. In the screenshot below I accessed the website from both a phone and a mobile device so I had 2 users show up.
If you see this then you know your analytics was installed correctly!