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:
1) Login to your WordPress site and go to Astra Options.
2) Activate the Custom Layout feature from the options shown on the page.
3) Head over to Custom Layout and enable Code Editor as shown below:
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.
5) Choose the Action as wp_head and set it to Display on the Entire Website, and then click Publish:
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.
8) Choose body_top from the Actions dropdown and set it to display on the Entire Website. Click Publish once done to save it.
9) Your Custom Layouts page should look something like this:
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:
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:
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.
