This video shows you most effective way to install Google Analytics or any tracking script like HotJar or Tag Manager in your WordPress site. Utilizing Code Snippets, a free plugin, means that the code is independent from your theme or page builder and updates won’t affect your tracking code.
We’ll also cover how to add code to the body of your Oxygen Builder website.
Keep in mind that if you’re using Tag Manager, you don’t need the regular Analytics code as well. You should add GA as a tag inside Tag Manager so you don’t duplicate your efforts.
Base Example Code Snippet:
add_action( 'wp_head', 'ps_google_analytics' );
/**
* Adds Google Analytics code in <head> below the <title>.
*/
function ps_google_analytics() { ?>
<?php }
Full Example Code Snippet:
add_action( 'wp_head', 'ps_google_analytics' );
/**
* Adds Google Analytics code in <head> below the <title>.
*/
function ps_google_analytics() { ?>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<?php }
add_action( 'wp_head', 'ps_hotjar' );
/**
* Adds Hotjar code in <head> below the <title>.
*/
function ps_hotjar() { ?>
<!-- Hotjar Tracking Code for http://persistent-boar.w6.wpsandbox.pro/ -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:2227298,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<?php }
add_action( 'wp_head', 'ps_tagmanager_1' );
/**
* Adds Google Tag Manager code in <head> below the <title>.
*/
function ps_tagmanager_1() { ?>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
<?php }
add_action( 'ct_before_builder', 'ps_tagmanager_2' );
/**
* Adds Google Tag Manager code after opening <body> tag.
*/
function ps_tagmanager_2() { ?>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
<?php }
Reference: https://wpdevdesign.com/how-to-add-google-tag-manager-code-in-oxygen/