Adding Google Tag Manager Scripts using Custom Blocks

Note: This tutorial requires the use of Custom Blocks module, so you would need the Suki Pro plugin in order to use the Custom Blocks module.

There are many ways to insert Google Tag Manager snippets into your page. You can use hard coding on a Child Theme, additional plugin, or our Custom Blocks module. This article will cover how to add Google Tag Manager snippets into your page using Suki’s Custom Blocks module.

As mentioned in Google Tag Manager documentation, you need to insert 2 snippets into your page.

Main Google Tag Manager snippet

The main Google Tag Manager snippet is mandatory. Without this snippet, your Google Tag Manager script won’t be initiated. This main snippet should be placed in <head> tag and should look like this:

<!-- Google Tag Manager -->
<script data-cfasync="false">//<![CDATA[
(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=
'//www.googletagmanager.com/gtm.'+'js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');//]]>
</script>
<!-- End Google Tag Manager -->

Please follow these steps below to add the main snippet:

1. Create a new Custom Block

Create a new Custom Block by going to Appearance > Suki – Custom Blocks, and click Add New button.

2. Paste the main Google Tag Manager snippet

Create a new HTML block in the editor and paste the main Google Tag Manager snippet into the HTML block.

3. Set the hook action

In the Block Settings meta box, please set the Location > Insert into template hook option to Inside <head> tag.

4. Set display rules

After that, don’t forget to set the Display Rules > Show on option to Entire Website to make the Google Tag Manager initiated on all pages.

5. Save and publish

You can name this Custom Block with any name that you want, as the title is just for your own reference and won’t be displayed on the frontend. Click the Publish button and done!

Secondary Google Tag Manager snippet

The 2nd snippet is not mandatory, but it’s recommended to use by Google itself. This snippet should be placed on right after the <body> opening tag and should look like this:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

You can follow the same steps as when adding the main snippet. But you need to set the Location > Insert into template hook option to After opening <body> tag. You might also want to set the hook priority to 1, to make sure that it’s rendered first, just right after the <body> opening tag.

Exclude Google Tag Manager script for logged-in users

Optionally, you can only initiate Google Tag Manager for non-logged in users. In this case, you should go to the snippet Custom Block edit page, and then set the Display Rules > Visible to option to Logged Out Users. Voila!

Tips