In this guide, we are going to walk through how to add Google Analytics to a WordPress website using the Divi theme (or any other WordPress theme). This is the implementation I personally use at Birch River Design Group when building out a website for clients.
We are going to use Google Tag Manager to implement Google Analytics with a custom variable that check whether or not a WordPress user is logged in. If a user is logged in, Google Analytics will not track the user. This way the writers or web developers on your team will not mess with the Google Analytic numbers when working on the website.
In this guide, I am going to be using live screenshots from the website ApproachableOutdoors.com. If you’re in Colorado and love hiking, I highly recommend checking it out!
Step One:
Install Google Tag Manager on Your Website
If you do not have Google Tag Manager setup yet, create an account at https://tagmanager.google.com/
To add Google Tag manager to your Divi WordPress website we need to first grab the GTM code. In the GTM dashboard navigate to the Admin tab, and then choose “Install Google Tag Manager”:
You will be presented with a screen that shows two sections of code. We will need to copy both of these pieces of code into your Divi WordPress website.
In your WordPress admin dashboard, navigate to your Divi Integration settings. You can get here by clicking “Theme Options” under the Divi category on the left-hand navigation. Once you are there, click on “Integration”.
The first bit of code Google Tag Manager wants you to copy and paste will go into the first text box area labeled “Add code to the <head> of your blog”.
The second code box will go into the second text box area labeled “Add code to the <body> (good for tracking code such as Google Analytics)”.
In the image below each important item is circled in red.
Once you have pasted the code into their respective boxes, hit the save button. Google Tag Manager is now officially installed on your Divi WordPress website!
Step two:
Set Google Analytics to Trigger Only For Users Not Logged In
In this section we are going to do a few things:
- Create a custom variable that detects whether or not a user is logged into WordPress
- Create a custom variable that holds your Google Analytics tracking ID
- Setup a trigger that sends a Google Analytics page view only when Google Tag Manager detects that the person loading the webpage is not logged into WordPress
Detect Whether or Not A Visitor Is Logged into WordPress
To detect whether or not a vistor is logged in we are going to create a custom variable in Google Tag Manager.
Navigate to Google Tag Manager, choose Variables on the left hand side, then choose “New” in the User-Defined Variables section:
Name this variable “WordPress Logged In”:
Click the “Variable Configuration” box to open the Variable Type options. Scroll down and select “DOM Element”:
Configure the DOM Element Variable as follows:
Selection Method: CSS Selector Element Selector: body.logged-in Attribute Name: class
Hit save! Let’s move onto setting up the Google Analytics trigger correctly.
Create the Google Analytics Tracker ID Variable
If you are setting up Google Analytics through Google Tag Manager for the first time, you will need to setup a “Google Analytics Settings” variable.
Navigate back to your Variables page and select the “New” button in your User-Defined Variables box.
Name your variable “GA Tracking ID”:
Click the “Variable Configuration” box and choose the variable type “Google Analytics Settings” under the Utilities category:
The only setting you need to configure on this page is the “Tracking ID” box.
If you’re like most people, you most probably do not know your Google Analytics Tracking ID off hand. You can find it by navigating to the admin settings in Google Analytics, then choosing “Tracking Code” under the “Tracking Info” Property category. The Tracking ID will be labeled accordingly as pictured below:
Go ahead and hit “Save” back on Google Tag Manger to save the variable. Great! Another step down. Let’s move onto creating the actual trigger!
Setup the Google Analytics Trigger
If you have followed the instructions above, your Google Tag Manager will have two variables setup. One which will look for a class that indicates whether or not a user is logged into WordPress. The other holds the tracking ID for your Google Analytics property.
It is now time to setup the trigger that runs checks the variable we have setup, and if a user is not logged in, sends a Page View to Google Analytics.
Navigate to the “Tags” section of your Google Tag Manager and choose “New” in the tag box.
Title your trigger something descriptive. In this example I am going to title the trigger “Google Analytics Universal Analytics (WP Not Logged In)”
Click on the white box labeled “Tag Configuration” and choose “Google Analytics: Universal Analytics”:
Be sure your “Track Type” is selected as “Page View”. For “Google Analytics Settings” choose the “{{GA Tracking ID}}” we setup in a previous step.
When you have the above settings configured properly, click the white box labeled “Triggering” in the second half of the pane. This will open a list of triggers. At the top right there will be a plus sign that allows you to build a new trigger. Go ahead and click it.
Building the trigger properly is key here so be sure each section is filled out correctly. Please refer to the picture below to be sure you have each section filled out correctly.
Name: DOM Read - WordPress Not Logged In Trigger Type: Page View - DOM Ready This Trigger Fires On: Some DOM Ready Events
For the section that reads “Fire this trigger when an Event occurs and all of these conditions are true”, be sure it is configured as pictured below.
WordPress Logged In (The variable we configured) Equals null
Once properly configured, save your trigger, and then save the entire tag configuration. You will be back at the main tag screen in Google Tag Manager with a new tag as pictured below.
Step three:
Publish Your Tag Manager Configuration
With your Google Analytics Tag configured with logic to determine whether or not a user is logged into WordPress, there is only one more thing to do… make it live on the website!
Google Tag Manager changes must be published for it to show up on your website.
Towards the top right of the Google Tag Manager screen, there will be a button that says “Submit”. Click it to start the publishing process.
The next window will ask you to name the update you are about to push out, and to add a detailed description. I have elected to use the following:
Version Name: GA Added
Version Description: Google Analytics added with logic to determine whether or not a WordPress user is logged in.
Hit the “Publish” button at the top right and your changes will be pushed to your website!
Success! You are now tracking only users who are not logged into WordPress. Your Google Analytic statistics will be super accurate as long as you are logged in while working on your website.