Share this post

How to Add Google Tag Manager Code in Astra WordPress Theme?

How to add Google tag manager in Astra theme

If you’re a website owner or making one for your client, and looking for a way to add the Google tag manager code in the Astra theme, this post is a perfect place to know how it’s done. As a web design agency, we work with the Astra WordPress theme almost exclusively for all our clients. It’s a great theme, extremely versatile and lightweight. If you’re looking for a theme to build your site, Astra is one of the best themes to pick.

We will be using Astra’s Custom Layout feature which is only available in the Pro version of the theme. If you don’t have it yet, we’ll highly recommend that you get it here.

Step by step method to add Google tag manager code in Astra theme:

We assume that you already have a Google tag manager account. If you don’t have one yet, here’s a blog post we wrote how to set it up:

How to create a Google tag manager account.

1) Login to your WordPress site and go to Astra Options.

Click Astra Options in WordPress

2) Activate the Custom Layout feature from the options shown on the page.

Activate Custom Layouts in Astra WordPress

3) Head over to Custom Layout and enable Code Editor as shown below:

Click Custom Layouts in Astra WordPress
Enable Code Editor in Custom Layout

4) In the fields displayed, give your Custom Layout a name for easy identification. We’ve called it Google Tag Manager – Head.

Then add your Google tag manager code (the one that should go in the <head> section of the page) and then choose Hooks from the Layout dropdown below.

Edit Custom Layout - Google tag manager head code

5) Choose the Action as wp_head and set it to Display on the Entire Website, and then click Publish:

Enter Custom Layout settings for GTM Head

6) Next, create another Custom Layout – this time to add the Google tag manager code that should be placed in the <body> area of the page.

7) Provide a name to this Custom Layout. We’ve called it Google Tag Manager – Body, to identify easily.

Add the Google tag manager <body> code snippet in the area provided and then choose Hooks from the Layout option below.

Edit Custom Layout - Google tag manager body

8) Choose body_top from the Actions dropdown and set it to display on the Entire Website. Click Publish once done to save it.

Enter Custom Layout settings for GTM body code

9) Your Custom Layouts page should look something like this:

Custom Layouts page for Google tag manager

Technically, we are done here and can call it a day. However, it is always a good practice to check if the Custom Layouts we’ve published actually worked. In order to test if the Google tag manager code was successfully added to your website, open any page of your site, then right click on the mouse and click View page source as shown below:

Right click mouse to view page source code

You should be able to see the Google tag manager code placed in both the <head> and the <body> section of the website, as shown here:

Google tag manager head code in page source code
GTM head code shows up in the page source.
Google tag manager body code in page source code
GTM body code shows up in the page source.

And now…you can call it a day! Phew, that was some work, wasn’t it? You’ve successfully added the Google tag manager code in Astra theme. You can now do all sorts of fun with the incredible tool that is Google tag manager.

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