Share this post

How to Add Google Analytics Code in Astra Theme

How to add Google Analytics code in Astra theme

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.

Note 1: If you don’t have a Google Analytics account yet, here’s a post we wrote on how to create one: How to create a Google Analytics account.

Note 2: If you don’t have a Google tag manager account yet, here’s another post on how to go about creating one: How to create a Google tag manager account.

Note 3: Here’s another post on how you can integrate Google tag manager in Astra: How to add Google tag manager code in Astra using Custom Layouts.

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

Create new tags in GTM

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:

Give GA 4 tag name in GTM New

4) Choose a tag type. Select Google Analtycis: GA4 Configuration from the list provided:

Select GA 4 tag in Google tag manager

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.

Provide measurement ID for GA 4 tag

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:

Select a trigger in GTM

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:

All pages trigger in GTM

8) You should now see a page that looks like the one below. Click Save and proceed.

GA 4 tag set up in GTM

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

Preview for GA 4 tag configuration

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.

Enter site URL in tag assistant

11) If it gets connected successfully, you should now see this message:

Tag assistant connected

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.

GTM Debug mode 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) :

User in GA 4 real time report

14) Now that we’ve tested in Preview mode and is working fine, go ahead and click the Submit button.

GA 4 tag - Submit

15) Add a version name, a version description and click Publish.

GA 4 tag - Version name

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.

Create new GTM tag for Universal analytics

2) Give your tag a name and click Tag Configuration.

Give Universal analytics tag name in GTM

3) From the list displayed, choose Google Analytics: Universal Analytics

Select Universal Analytics tag in GTM

4) Ensure the track type is set to Pageview. Under Google analytics settings, choose New Variable as shown:

Enter GTM tag configuration details for Universal analytics

5) Enter your Universal Analytics tracking ID. If you can’t find it, here’s a blog post to show where to locate.

Enter Universal analytics tracking ID in Google tag manager

6) After providing your tracking ID, your screen should look as shown below. Then click on the Triggering section.

Select trigger for Universal analytics in GTM

7) Select All Pages from the list displayed. This will fire your Universal Analytics tag on all pages of your website.

Select all pages as trigger for Universal analytics GTM tag

8) You should now be looking at a screen that looks like the following. Click Save

Universal analytics tag set up in GTM

9) We still need to ensure that we’ve set things up correctly. Go ahead and click on Preview as shown.

Preview for Universal analytics GTM tag

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.

Enter site URL in tag assistant

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.

GTM Debug mode connected

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)

User in Universal analytics real time report

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.

GA Universal Analytics tag - Version name

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

Click Customize to open Customizer in WordPress

3) In the WordPress Customizer, click on Hooks

Click on Hooks

4) Then click Header

Click on Header in the Astra Hooks plugin

5) Finally, add your Google analytics code in the wp_head section as shown below. Then click Publish.

Add Google analytics code in the wp_head section in the Astra Hooks plugin

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.

We're all on an adventure!

2nd Floor, Building No. 150, Zakaria Masjid Street, Mumbai - 400 009, India.

Web design

Web development

WordPress development

SEO services

Ecommerce SEO services

Local SEO services

Social media marketing

Digital marketing

Internet marketing

Pay per click (PPC)

Content writing

Mobile app development

Website SEO Audit

Blog

About Us

Contact

Refer and Earn

Privacy Policy

Scroll to Top