Implementing Google Tag Manager

Using Hooks Element

If you have GP Premium, using our Hooks Element module would be the easiest way to add the code.

The first block of code should look similar to this:

<!-- 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 -->
  1. Go to Appearance > Elements and click “Add New”. From the Element dropdown list, choose “Hook”.
  2. Copy and paste the your own code into the content area.
  3. Under Settings tab, select wp_head in the Hook dropdown list.
  4. Under Display Rules tab, select Entire Site in the Location dropdown list.
  5. Click the Publish button then we are half way done.

The second block of code should look similar to this:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  1. Go to Appearance > Elements and click “Add New”. From the Element dropdown list, choose “Hook”.
  2. Copy and paste the your own code into the content area.
  3. Under Settings tab, select before_header in the Hook dropdown list and set the Priority to 0.
  4. Under Display Rules tab, select Entire Site in the Location dropdown list.
  5. Click the Publish button then we are all done.

Using Functions

If you don’t have GP Premium or prefer to use functions, your code should look similar to below:

add_action( 'wp_head','gtm_part_1' );  
function gtm_part_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( 'generate_before_header','gtm_part_2',0 );  
function gtm_part_2() { ?> 
    <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php }

The functions above need to be added as PHP.