Skip to main content

How to Implement the Blue Triangle Tag in Google Tag Manager

  • Updated

Summary

In this guide, learn:

Steps to implement the Blue Triangle JS tag in Google Tag Manager (GTM)

Deploying the Blue Triangle JS tag is easy via tag managers like Google Tag Manager (GTM). First, you need to receive your custom tag from Blue Triangle. It should look like this:

<script async="true" type="text/javascript" src="//YOURSITE.btttag.com/btt.js"></script>

1. Go to tagmanager.google.com and login to your account.

2. Select "Add a New Tag."

getting-started-implement-btt-tag-on-google-tag-manager-1-300x300.png

3. Name the tag "Blue Triangle" (or whatever you'd like). 

getting-started-implement-btt-tag-on-google-tag-manager2.png

4. Select "Choose a Tag Type" and choose "Custom HTML."

getting-started-implement-btt-tag-on-google-tag-manager3.png

5. Paste the Blue Triangle tag you were provided with.

getting-started-implement-btt-tag-on-google-tag-manager4-300x300.png

6. Scroll down and select "Triggering".

7. If you have a Trigger created that tells the tag to load after the Onload event, or Window Loaded, choose that.

If not, you'll need to create a new trigger by selecting the "+" icon in the top right.

getting-started-implement-btt-tag-on-google-tag-manager5.png

8. Now you can add the "Window Loaded" event trigger.

getting-started-implement-btt-tag-on-google-tag-manager6.png

9. Now click Save.

Once you submit the changes you made to GTM, your real-user data will begin populating inside Blue Triangle.

Special Considerations

Unlike other analytics providers, the Blue Triangle tag should not be loaded in the <head> of a page. Any tag that loads in the <head> can impact your performance.

The Blue Triangle tag loads asynchronously by default. Please do not make changes to the tag (e.g. removing async), as this could break your website.

If parts (or all) of your site is a Single Page Application (SPA), please refer to this guide: Tag Implementation for Single Page Applications.