How To Set Up Google Tag Manager And Install Google Analytics 4 (GA4) Into A WordPress Website

How To Set Up Google Tag Manager And Install Google Analytics 4 (GA4) Into A WordPress Website

STUDENTS

arnold on Apr 07, 2023

***Updated 11/14/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:

Google Analytics
Google Ads
Facebook Ads
Twitter Ads
LinkedIn Ads
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

Set Up Google Tag Manager Account

 

Next you will have to accept the terms from Google to continue.

Accepting Google Tag Manager Terms

You will then be given access to the Google Tag Manager Code For Your Account:

Google Tag Manager Default Code

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.

How to access the theme file editor in WordPress

 

If you get a warning message then just click I UNDERSTAND.

WordPress Editor Change Warning

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.

Select the theme header

You should see a screen that looks something like this:

Header Theme Code In WordPress Editor

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.

Where to insert Google Tag Manager Code In WordPress Theme File

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.

Inserting Google Tag Manager Code Into The WordPress Editor

 

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.

How To Check Homepage Code For Google Tag Manager Code

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:

Signing Up For Google Analytics

Enter your account name and then click NEXT. You can choose if you want to share info with Google or not.

Setting Up Google Analytics 4

 

Next set up your first property.  Since I am setting up a website I will just put the URL as the property name. Switch the timezone to something relevant to your location. Set property name in Google Analytics 4

 

You may be asked to enter your industry and number of employees.   Fill this out however you want and click NEXT.

Number of employees in google analytics 4

 

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”

Choose Business objectives in Google Analytics 4

 

You will need to accept their terms of use:

Accepting Google Analytics Terms Of Use

You should then see something like this where you can click skip for now:

Skip For Now

 

You will then see this screen where you can click to “Set Up Data Collection”

Set Up Data Collection Google Analytics 4

Since we are going to set up a website property you should click the WEB option below.

Set up website in google analytics 4

Now configure the property as shown below:

Setting up a stream in Google Analytics 4

 

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.

Copy GTM Code in Google Analytics 4

 

Navigate back to your Google Tag Manager page. In your Workspace select ADD A NEW TAG.

Adding A New Tag In Google Tag Manager

 

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.

Give tag a name Google Analytics 4

 

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.

Enter G Id In Google Tag

 

Next click on the Trigger box  to set up a trigger to load the Google Tag when someone loads your website.

click triggering box google analytics.

To ensure that the Google tag fires before other triggers, click Trigger and use the Initialization – All pages trigger.

Initialization All Pages Google Tag Manager

 

Your tag configuration should look like the image below.  Click the SAVE button to save your tag configuration.

Google Tag Setup

 

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.

Preview Google tag manager change

 

Enter the URL of your website and click CONNECT:

Preview Google tag manager change and enter yoru website

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.

 

Site connected Google Tag Manager

 

If everything was connected correctly then your screen will look something like this:

Tag Fired

 

Now we just need to submit our changes.  In the top right of your workspace click on SUBMIT.

Submit in google tag manager

Fill out your settings similar to the image below:

Give tag a name Google Analytics

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.

How to view real time analytics in GA4

 

If you see this then you know your analytics was installed correctly!

The Ultimate

DIGITAL MARKETING Email List

SPEND ONE HOUR A WEEK ON YOUR DIGITAL MARKETING WITH THE HELP OF OUR WEEKLY GUIDES EMAILED TO YOU!

SIGN UP NOW

    IS THIS CONTENT

    UP-TO-DATE?

    IF NOT, PLEASE LET US KNOW
    SO WE CAN UPDATE

    POPULAR POSTS