Wordpress

WordPress header.php Google Analytics not working with Elementor | Workaround

Having problems with your custom WordPress child theme header.php not working with Elementor Pro?

Can't get Google Analytics to load in your child theme header.php and you are using Elementor?

https://developer.wordpress.org/themes/advanced-topics/child-themes/We came across an unexpected issue today when trying to load Google Analytics into a WordPress website using Elementor Pro. Historically, when we wanted to include Google Analytics in a WordPress website, we would create a child theme with a custom header.php. That file would include the Google Analytics gtag code and the custom child theme header would override the default parent header.

When we made those changes, we were not able to see the new Google Analytics code in the page source code and it was not detected in the Google Analytics dashboard. At first we thought there was a caching issue and we went through all the steps to clear all known cache sources. Still nothing. We even went so far as to disable all header.php files just to confirm if it was a cache problem. To our surprise, disabling the header.php files in both the parent and the child theme had no effect on the website. But we were certain we had disabled and cleared all cache sources.

After more digging, we discovered something interesting about Elementor Pro that we had not known before. We had created a custom header template in Elementor Pro. When you create a custom header template in Elementor Pro like that, it overrides both the parent theme and child theme header.php. For the most part, that is ok, but the problem is that you are now not able to add customizations to the header.php file in traditional form. There is now no way to add the Google Analytics code (or any other custom code) to the header of the website without either using a plugin or using this workaround we are going to share with you.

A good developer knows that the less plugins you use, the better for both website performance and security. Rather than use a plugin or place the Analytics code into an Elementor widget (don’t do that), we add a small bit of code to our custom functions.php in our child theme. This code tells the theme to load our Google Analytics code (and any other code you like) into the head of the website, where it is supposed to be. Here’s how you do it.

These instructions assume that you are familiar with creating child themes and editing header.php files. If you are not familiar, please take a look at this link from WordPress.

https://developer.wordpress.org/themes/advanced-topics/child-themes/

add_action( ‘wp_head’, function(){
?>
<!– your custom head code goes here –>
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘UA-xxxxxxxx-x’);
</script>

<!– end custom head code –>
<?php
});

Replace the two bits UA-xxxxxxxx-x with your own Google Analytics property code and save/upload the file.
Once these changes are online, refresh the page in a web browser, make sure you clear the cache, and view the source of the online page to check for the new Analytics code.
If it is there, then use the "Send Traffic" link in Google Analytics tracking code page to see if it detects the new code. If it does, then you are done.
If you are not seeing your code on the live website, check to make sure your functions.php file is set up correctly and that it is loading from your child theme. Also double check to make sure you are not seeing a cached version of the page.

Jessica Hood - Bluetera

CEO and founder of Bluetera. Business owner and entrepreneur since the year 2000. Excelling in business management and marketing, website design, content management/production, and more.