CloudPanel Mastery Presale Open Now! >>

How to Install Google Analytics in WordPress and Oxygen

WordPress

February 2, 2021

YouTube video

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/

 

Join the Inside Link Community

Get access to all courses, weekly office hours, live build sessions, and an active community of WordPress professionals.

Learn More →