Google Analytics is a fantastic platform to store information about your site’s visitor. Once you have it set up, you can analyse the data to make important marketing decisions. The amount of information you can get from Google Analytics is quite staggering, to say the least. But simply creating a Google Analytics account isn’t enough. You need to connect your account with your website in order for the data to stream in from your website to your GA account. In this post, we’ll learn how you can add your Google analytics code in Astra via 2 methods:
1) Using Google tag manager (highly recommended).
2) Using the Astra Hooks plugin
As a web development company, we use Google tag manager all the time. It is an incredibly powerful tool and quite honestly – a must have in today’s digital landscape. It lets you fire appropriate code snippets (or tags) on the pages of your website when certain conditions are met. With further ado, let’s dive right in.
Add Google analytics code in Astra theme using Google tag manager
1) Login to your Google tag manager account by visiting: https://tagmanager.google.com and your Google Analytics account here: https://analytics.google.com
2) Click on Tags, then click New
3) We’ll first create a tag for Google Analytics 4 and later down the line, we’ll create one for Universal Analytics.
On the page that opens, you will see 3 sections – the first one to name the tag, the second one for the tag itself (i.e. what to track), and the third one for the trigger (i.e. when to track). We’ve given it an appropriate name to identify the tag later:
4) Choose a tag type. Select Google Analtycis: GA4 Configuration from the list provided:
5) Next, you’ll have to provide your GA 4 measurement ID as shown in the screenshot. If you don’t know how to locate it, check this post where we show you how to find your unique measurement ID.
6) Once you’ve provided your measurement ID, click Save. Next, you’ll be asked to choose a trigger. A trigger simply answers the question as to when a tag should fire. Click on the section called Triggering:
7) We want the Google Analytics 4 tag to fire on all the pages of the website so that we can learn what users are doing as they navigate our site. Therefore, we’ll select All Pages as shown here:
8) You should now see a page that looks like the one below. Click Save and proceed.
9) Although we’ve set our tag and trigger correctly, we’d still like to verify before submitting. Click on the Preview button as shown below
10) If you’re using the Chrome browser, we highly recommend that you install an extension called Tag Assistant Legacy (by Google). You can find it here.
This extension is very useful in determining if your Google tags are firing correctly and to investigate any underlying issues as you work with Google Analytics and Google Tag Manager.
Once you’ve installed the extension and click Preview (in step 9 above), you should now see a popup window asking you to enter your site’s URL in order to connect to it.
11) If it gets connected successfully, you should now see this message:
12) Your website should now open up in a new window. Notice that your site’s URL now shows /?gtm_debug=x (which is required to have a properly functioning Preview mode); and there’s also a small popup window in the lower right of the page – saying that the tag assistant is connected.
13) You should now be able to see yourself as a visitor on your website in the Real-time report (ensure you’re viewing your GA 4 property on top) :
14) Now that we’ve tested in Preview mode and is working fine, go ahead and click the Submit button.
15) Add a version name, a version description and click Publish.
You have now successfully connected your Google Analytics 4 property to your website using Google tag manager. However, if you have a Universal Analytics property and want to connect that too, here’s how you can do it.
Connect your Google Analytics: Universal Analytics in Astra theme using Google tag manager
1) Click on Tags, then click New to create a new tag.
2) Give your tag a name and click Tag Configuration.
3) From the list displayed, choose Google Analytics: Universal Analytics
4) Ensure the track type is set to Pageview. Under Google analytics settings, choose New Variable as shown:
5) Enter your Universal Analytics tracking ID. If you can’t find it, here’s a blog post to show where to locate.
6) After providing your tracking ID, your screen should look as shown below. Then click on the Triggering section.
7) Select All Pages from the list displayed. This will fire your Universal Analytics tag on all pages of your website.
8) You should now be looking at a screen that looks like the following. Click Save
9) We still need to ensure that we’ve set things up correctly. Go ahead and click on Preview as shown.
10) If you’ve installed the Tag Assistant Chrome extension (which we highly recommend that you do so), you should now see a popup asking you to enter your site’s URL. Then click Connect.
11) You should now see your website open in a new window. Notice your site’s URL with the parameter /?gtm_debug=x and a small popup in the lower right of the window stating that the tag assistant is connected – which is a good sign.
12) Check your Google Analytics account and ensure that you see yourself in real time as shown below. Please make sure that you are viewing your Universal Analytics property (and not GA 4 property)
13) Once you’re satisfied, go to your Google tag manager account and click Submit.
14) Provide a version name, description for future reference. Click Publish.
And...that's it!
Add Google analytics code in Astra using the Astra Hooks plugin
Astra has realeased a plugin called Astra Hooks that lets you easily add various pieces of content or scripts – such as those for Google analytics, Google tag manager, Facebook pixel etc., in different hook locations on your website. If you do not have the Astra Pro add-on, using this plugin will allow you to easily add your Google analytics code to your Astra website.
1) Install and activate the Astra Hooks plugin
2) Once activated, go to your Customizer settings by hovering on Appearance and then click Customize
3) In the WordPress Customizer, click on Hooks
4) Then click Header
5) Finally, add your Google analytics code in the wp_head section as shown below. Then click Publish.
Congratulations! You’ve successfully connected your Astra website (or any website for that matter) with your Google analytics account via Google tag manager or by using the Astra Hooks plugin. You can now sit back and wait for data to start collecting in your Google analytics account as your site gets more visitors as time goes by. You can then see what pages they are visiting, their demographics, the time they spent on your website and a lot more.
Adding Google analytics code in Astra using Google tag manager is fairly easy and with a bit of work, you are now able to accomplish setting it up.
