Add Google Analytics Code to your Child Theme Header

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.
~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~

Before we start: Avoid Duplicate Google Analytics Code

First off, there are many plugins that you can you use to add the google analytics code to your website. However, you only want to use ONE method. Since adding plugins can cause conflicts or affect site speed, here is an option available to you, to add the code yourself directly to the header.php file in your Child theme.

If you are using any other analytics plugin or have already installed this code on your parent theme, or in a “header/footer” plugin you will need to remove the duplicate Google Analytics code. Duplicate code will cause your analytics to be out of whack, an indication of this is that you will often start to see a very low bounce rate. Which may sound good at first, but it honestly is not.

Some examples of analytics plugins: Exact Metrics or Monster Insights you will need to disable these plugins if they are installed, so that you don’t end up with a duplicate of your Google Analytics code running on your site.

However, **Before** you disable any plugins and proceed, you need to know that Monster Insights plugin does track additional events in your google analytics that you may find useful that will no longer be available unless you add the event tracking through another method (not covered in this tutorial), as event tracking (link clicks, scrolling, etc) is not a default option.

What’s more, I believe both Monster Insights and Exact Metrics add the Google Analytics screen to your WordPress dashboard, which will no longer be available inside WordPress. Thus, you will now need to login to your google analytics console directly here: https://analytics.google.com/

Jump to the section to set a filter to exclude yourself from your Google Analytics
Jump to the troubleshooting section below, is google analytics installed twice?

 

 

So why would you want to add the code yourself directly to the header file?

As nice as the above features are, they really can affect your site loading speed for your visitors. Google considers site speed as important for visitors usability of your site for SEO.

And once you get the hang of the Google Analytics Console, you will like using the console directly, there is lots of analytics info you may not have seen yet, that are not available on the WordPress dashboard.

So now, it is up to you, if you want to proceed, please follow along. Also, don’t forget to let me know in the comments how easy or difficult you find this tutorial and if it was useful to you. Include Any steps you needed to modify as it may help other readers.

Already have your Google Analytics account setup, jump to adding the tracking code

First you will need your Google Analytics Code

If you don’t have an account setup with Google Analytics you will need to do the following.

Go to https://analytics.google.com and sign up.

You will be prompted to create your account.
Create your account

Then you will be prompted to set the account type, for WordPress this will be web.

Set account type

Then you will be prompted to create the property – which is your domain website.

Create the property

Then you will need to read through and accept the terms of setting up Google Analytics.

Google terms screenshot

This will bring you to the tracking info you’ll need to add to your account.

New property info

Adding the Google Analytics Tracking Code

  • In a new tab or window, you will need to login to your google analytics console https://analytics.google.com/ to get your analytics code to paste into the header file.

  • Inside Google Analytics click on the Admin button on the bottom left of the screen.

  • Screenshot of the admin button and Tracking code location in Google Analytics

  • Then click on Tracking Code ( You may need to click on Tracking Info first).

  • Copy the code in the grey box that looks like this:

  • Screenshot of the google analytics script to copy

    There are many methods you can use to add the Google Analytics code to your site. Again remember to just use one method.

    Adding the Analytics Code to the Header Footer Code Manager

    *Note: some themes include a header/footer section where you can add code without adding a plugin.

    Install the Header Footer Code Manager plugin. Then add a new snippet fill in the information like below in the image.

    Paste in your Google Analytics code, then click save.

    Remember to clear your Site cache and browser cache.

    Adding Google Analytics code to HFCM

    Back on the Google Analytics code tab, there is a button to send test traffic to confirm that the code is working as expected.

    Jump to the section to set a filter to exclude yourself from your Google Analytics

    Jump to the troubleshooting section below – why are no events showing in Google Analytics

    If you’d prefer to add the code directly to your Child theme Header file instead of using the headers/footers plugin, continue below. Otherwise you have completed this tutorial.

    Adding the Google Analytics Code to your Child Theme Header file.

    Make sure to take a backup before you start. See this post here on backing up with Updraft Plus

    For additional methods to edit your theme header see this post, the link will open in a new tab so you don’t lose your place.

    **Make sure to take a backup of your website before you start** Instructions to backup with UpdraftPlus

    First, you will need to login to your cPanel or FTP site on your host. You may also be able to do this from the WordPress file editor, however, on our sites this is disabled by our security settings.

    The instructions contain examples from the Bluehost cPanel.
    1. Login to your Bluehost account
    2. Click Advanced
    3. Select the File Manager
    4. Screenshot of finding the Bluehost cpanel File Manager
    5. Navigate to your wordpress install theme folder
    6. This is the location of the default install folder, yours may be slightly different. "public_html/wp-content/themes/" screenshot of public html Screenshot of the Wordpress Themes Folder

      If you do not yet have a child theme setup and would like information on how to do so,
      see this post here: How to Setup a Child Theme for your WordPress Blog

      Now that we are in the correct folder you need to copy the parent theme header.php file to your child theme folder.

      1. Click on the Parent theme folder, in this example we are using the TwentyNineTeen Theme.

      2. Screenshot of Select the Parent Theme Folder twentynineteen

      3. Right click on header.php file and click copy

      4. screenshot Right click to Copy the Header.php file from parent theme

        – This is how the copy form will look at first

        Screenshot Initial Screen when you click Copy

      5. Add “-child” to the theme name, see the image below

      6. Screenshot of add the child to the location

        If this is the first time adding files to your Child theme, you should now see these 4 files in your Child Theme folder
        Screenshot of the Child Theme folder with the header.php file added
      7. Then go to the child theme folder and right click on the header.php file and first select to download a copy and save to your computer as a backup

      8. Note: in this instance, we are downloading this file to get in the practice of backing up your file before making changes, since this is the first copy of the file and you do have a clean copy of this file in the Parent folder, you could skip this step.

        Screenshot of Download the file to save a backup

      9. Then right click the header.php file (again) and this time select to EDIT

      10. screenshot right click to edit the file to save a backup

      11. Paste the Google Analytics Code in the header as shown here, before the line that looks like this (this may be different for your theme, but it should still look fairly similar).


      12. <?php wp_head(); ?>
        </head>

        Example before adding the code
        Screenshot of the header file before changes
        Example after adding the Google Analytics code

        Screenshot of after adding the google analytics code to the header file

      13. Then save the file, and you can close it.

      14. screenshot of Save button

      If you are following along and making these changes to your Child Theme Header file, then your analytics code will be safe (not overwritten) when your theme updates.

      REMEMBER if you change themes, the header file code will need to be added to the new theme (or new child theme), you may also want to copy/move over any other changes you’ve added to this child theme to the new child theme.

      Exclude yourself from Google Analytics

      If your Public IP address does not change frequently, then you can exclude yourself from Google Analytics with a filter. Another option is to add a browser extension to block yourself from Google Analytics. This filter extension comes up on searching google.

      Google your Public IP address.

      Google your Public IP address

      Login to your Google Analytics (link will open in a new window)

      Click on the settings icon on very bottom of the screen, then select Filters.

      Screenshot of Google Analytics Property filters

      Click the +ADD FILTER button.

      Google Analytics add filter

      Enter details like this, using the first three parts of your Public IP address from the Google Search results.

      Create the filter to exclude your IP

      Then save the filter.

      Test visiting your site and check real time that your location (city or country) does not appear as currently visiting your site.

      Troubleshooting Google Analytics

      In this section we will look at two possibilities that may show there is a problem.

      • Too Low bounce rate – is Google Analytics installed twice?
      • No Google Analytics events showing – is the code even installed?

      On the Google Chrome browser, install the following extension Tag Assistant by Google (it may be available for other browsers, but I use it in Chrome).

      Once installed visit any page on your website and enable the Tag Assistant.

      Click on the extension on your browser and select to enable, then select to record.
      Tag assistant, enable then record

      Then refresh your page.

      If you have the code installed correctly it should appear like this, the tag will show green:
      Google Analytics installed correctly

      Note, the part that says it is a non-standard implementation is okay. This is a false alert.

      False warning

      Info on Non-Standard implementation alert

      If the code is installed twice or more you will see this yellow tag and the alert below.

      Google Analytics installed twice

      If you see that your code is installed twice, double check your plugins. Do you have any plugins that are adding your analytics code for you, or are you using a header/footer plugin (or more than one) and adding the code in more than one spot?

      Point of clarification – Google Tag Manager has 2 parts to its code, the <script> inside the header and the <noscript> just after the opening <body> tag, if you are using this code, it is correct to have both the script and noscript parts, these two parts together count as “one code”.

      No Tags Found – Google Analytics not installed

      This is the worst of the three options and can happen if you change themes without moving the code to the new theme or if you just haven’t installed Google Analytics code for your site yet. (Go back to the top of the article and follow the tutorial to install your Google Analytics code).

      Related: Things to consider before changing your WordPress theme

      No Google Analytics installed

      If you need help, please ask in the comments or in our Facebook group.

       

       

      Got blogging questions? Join my Facebook group here WP Blogger Assist Questions Advanced WordPress user with coding knowledge? Advanced Coding on WordPress

    Tara, WP Blogger Assist

    I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

    2 thoughts on “Add Google Analytics Code to your Child Theme Header

    Leave a Reply to helene Cancel reply

    Your email address will not be published. Required fields are marked *