Are you looking for a way to add Google Analytics code in Astra theme? In this tutorial, we will see how to add Google Analytics JS script in Astra theme.
The best way to add the JS code is by using a child theme. Before we proceed further, we assume that you’ve had already created a child theme. If not, you can use the Astra child theme generator to create a child theme.
Adding code in the child theme will ensure it does not get removed even if the parent theme is updated.
Now we’re all set to add Google Analytics code in Astra theme.
Creating a Google Analytics account
Google Analytics code is important. It tracks how the visitors are interacting with the website and provides analytics like demographics, user behavior, traffic sources, etc.
It is crucial to add the analytics code for a website’s success. You can create it from here: Create Google Analytics account
It’s free!
Next, you will need the analytics tracking code( JS script) that can be found in the Admin dashboard area
Copy the tracking code provided as we’re going to add it to the Astra theme.
How to add Google Analytics code in Astra theme
We can add the JS scripts or any custom code snippets in the theme sections like header/footer in many ways.
Here we will see three methods to add any JS code script in the header section of Astra theme.
Let us have a look at all the three methods one by one:
1. Using the Free Astra hooks plugin:
Astra theme has created a free Astra hooks plugin which allows you to add the custom JS code at various hook locations provided in the theme.
Install and activate the Astra hooks plugin.
From the Dashboard, navigate to Appearance > Customizer > Hooks > Header > wp_head
Add the GA code within wp_head action and publish it.
2. Adding Google Analytics custom code in child theme functions.php directly.
The second way to add the Google analytics code is to paste the script in the child theme.
Child theme consists of only two files – stylesheet.css and functions.php
We can use the wp_head hook inside functions.php, this way you won’t need to add an extra plugin.
Navigate to Dashboard > appearance > theme editor > Select theme to edit > Astra Child.
Select the functions.php file.
//Add scripts to astra_header()
add_action( 'wp_head', 'add_ga_script_header' );
function add_ga_script_header() {
?>
<!-- Global site tag (gtag.js) - Google Analytics -->
// Add the GA script here.
<?php
}Here is the image for reference:
3. Using Insert Headers and Footers plugin.
There are many cases where you would like to add the JS script and it should remain on the website even if the theme is changed. In such a case, it is recommended to add the code using a third-party plugin which adds the custom code in the header hook.
This prevents the removal of code even if you switch to any other theme. This way, your analytics data will be stored and will not get affected.
Insert Headers and footers is a free plugin that can be used to add the JS code in the header/ footer on the website irrespective of the theme.
Wrapping up:
Now you have seen how to add Google Analytics code in Astra theme. If you want to add the code using a plugin, use the first and third methods.
If you’re comfortable adding the code directly to your child theme functions.php, use the second approach.
I hope this tutorial has helped you. Please feel free to let us know if you face any difficulties, we will be happy to help.
Recommended reading:
