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

Sponsored Ad

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
});

Jessica Hood - Bluetera

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.

Categories

Recent Posts

Follow Us

Bluetera Logo for AMP

Need help with your website, social media, SEO, online ads or something else? Bluetera can help!

Sponsored Video