SOP 083: How to setup most tools on your website using GTM

Goal: 
To install (almost) any SAAS tool on your website correctly.

Ideal Outcome: 
The code from your tool is installed in the pages where you want it to.

Prerequisites or requirements: 

Google Tag Manager needs to already be running on your website, if you haven’t already you can follow other SOPs available for WordPress SOP 004 (web version), Shopify SOP 065 (web version), and Squarespace SOP 066 (web version). 

Why this is important:

Installing tools through Google Tag Manager allows you or any other members of your team (even if they do not know how to code) to make changes to them on the fly and know which tools are showing up where at any moment.

Where this is done: 
In Google Tag Manager and the tool that you want to ins

When is this done: 
Every time you want to install a new tool.

Who does this: 
Your webmaster or the person responsible for installing this tool.

1. If you haven’t already, install the Google Tag Assistant extension for Google Chrome.

If you’re using a tool that requires you to install code on your site, it can (and should) be installed through Google Tag Manager.

Examples: Google Analytics, Hotjar, Crisp, Facebook Pixel, Google Ads, Quora Ads, Reddit Ads, Drip, Bing, Sumo, Snapchat Ads, Twitter Ads, Visual Web Optimizer, Google Optimize, etc.

In those cases you will be asked to add a ‘Script/Code Snippet’ to your website like so:

If there are specific instructions in regards to which pages of your website you should add that code snippet to, take note of it:

1. Log into Google Tag Manager here .

2. Select the account that you want to use (the one that is being used on the site on which you want to install your tool):

Note: If you’re not sure which container your website is using you can click the tag icon on your browser (assuming you have installed the Google Tag Assistant extension already)

3. Click Tags > New

4. Name your tag (give it a relevant name, for example: [Name of tool] - [Description]) and click anywhere in the “Tag Configuration” section:

Now there are two options, either you set it up as a generic code snippet (in case your tool doesn’t have a pre-made template) or you use a pre-made template for it. Your choice will depend on the existence or not of a template already. Click the search icon and start typing the name of your tool:

If your search retrieves a relevant result: Your tool most likely will have specific instructions on how to set it up with Google Tag Manager. In this case refer to the documentation (searching for ‘GTM’ or ‘Google Tag Manager’ on their documentation, or “[tool]+[google tag manager]” on google should retrieve it) or contact their support and stop following this SOP.

If your query does not retrieve anything or you want to set it up as a generic tool (works in most cases): Move ahead to the next step.

Select “Custom HTML”:

 5. Paste the code snippet that you retrieved from the first chapter of this SOP onto the HTML section:

6. Paste the code snippet that you retrieved from the first chapter of this SOP onto the HTML section:

7. Click “Triggering”:

There are two options now:

Select “All Pages” if that Code Snippet needs to be on every page where Google Tag Manager is installed on.

or

Click the “+” icon on the top right corner → Click the “Trigger Configuration” section → Click ‘Page View’ → Click “Some Page Views” → Click “Page Path” (Or Page URL) → Define the conditions where you want the code snippet to appear → Click ‘Save’.

8. Click ‘Submit’

Now you’ll want to test what you’ve done, just before you publish it for the whole world to see. Click ‘Preview’:

You should get the following message:

On a new tab, open up your website and navigate to a page where you would:

Want your tool/code snippet to show up:

You should be able to see the name of your tag under the ‘Tags Fired on This Page’ section:

Don’t want your tool/code snippet to show up:

You should be able to see the name of your tag under the ‘Tags Not Fired On This Page’ section:

Note: If this is not the case, make sure all the prior steps on this SOP have been followed correctly. Do not move ahead to the next step without making sure it passes the validation above.

9. Add a descriptive ‘Version name’ and ‘Description’ and Click ‘Publish’:

That’s it! Your code snippet should now be showing up on all the pages you need and your tool should now be able to work properly.