Google Tag Manager for Experience Builder

In this article, we will look at:

• Overview of Google Tag Manager
• How to set up Google Tag Manager
• How to add Google Tag Manager to an Experience 
• Use cases
  • Configuring Google Analytics
  • How to redirect the form somewhere else once the form has been submitted
  • How to add custom CSS to the Experience Page 
    • How to make a banner once submitted disappear
  • How to listen for and track events on certain elements
  • How to add retargeting pixels
  • How to implement a different cookie management tool 
• How to Test and Publish Google Tags
• Learning resources 

Overview of Google Tag Manager

Google Tag Manager is a tag management system developed by Google that allows website owners and marketers to manage and deploy various tracking codes, scripts, and tags on their websites without having to modify the site's code directly.  We have built this into Experience Builder so you can utilize Google Tag Manager to do out-of-the-box modifications that currently don't exist in ExB.  

How to set up Google Tag Manager 

1. Go to Google Tag Manager. Sign up if you do not already have an account or sign in with the Google account you like to use
2. Click on create account
3. Fill in the details and pick Web for the target platform
4. Click Create

Now you are ready to link this to your Experience Builder Page.

How to add Google Tag Manager to an Experience 

1. Go into the Experience Builder page that you would like to add Google Tag Manager
2. Click on the settings cog in the right-hand corner
3. Scroll down to find Connect your page to Google Analytics or Google Tag Manager for visitor tracking and more 
4. Click on the dropdown 
5. Select Google Tag Manager
6. Enter the Google Tag Manager Container ID.  To find this, log in to your GTM account and open a container. In the top right corner (next to the Submit and Preview buttons) you'll see some short text that starts with GTM- and then contains some letters/numbers or you can find it when you log into GTM and find it under all accounts.  
7. Click Apply

Use cases

Configuring Google Analytics 

To configure Google Analytics, you need to do the following first:

• Create Google Analytics Account and Property
• Create your Experience Builder page
• Create your web data stream for your Experience Builder Page 
• Add your Google Tag Manager ID to your Experience Builder Page 

If you only plan to use Google Analytics and do not plan to use anything else on Google Tag Manager to modify your Experience Builder page, just pick the option in the Experience Builder settings for Google Analytics.  If you will be adding other modifications and want to Google Analytics as well, do the following: 

1. In Google Tag Manager, click Tags > New.
2. Name your tag 
3. Click the Tag section and select Google Analytics: GA4 Configuration option
4. You will need to add your Google Analytics information in the field Measurement ID. Enter your "G-" ID. To find this, go to Google Analytics and click Admin cog > Data Stream > Select the Data Stream you want to link and copy the Measurement ID. 
   
   Then you will need to put User Properties > Property name.  I would suggest you put the same name as your Data Stream name
5. There are optional options that you can pick.  Click here for further information on these
6. Now we need to create the trigger.  The reason for the trigger is to load Google Analytics at the same time as when someone loads your website so it can track the data
7. Click on the + button 
8. Click on Initialization. Keep All Initialization Events under This trigger fires on selected
9. Click Save
10. At this point, you can test and publish the tag, see the instructions on how to do this below. 

How to redirect the form somewhere else once the form has been submitted

Code needed: 

<script>
  var button=document.querySelector('.tint-form form#formId button[type="submit"]');
  button.addEventListener("click",function(){
    window.open("INSERT URL HERE", '_blank')});
</script>

1. In Google Tag Manager, click Tags > New.
2. Name your tag 
3. Click on the + button 
4. Choose Custom HTML as your tag option
5. Copy the code above and paste it into the input field
6. Click on the edit button in the Trigger section
7. Click on the + button to create a new Trigger 
8. Name your Trigger
9. Click on the edit button
10. Choose Click All Elements
11. Then you will need to edit this to Some Clicks under This trigger fires on
12. Under Fire this trigger when an Event occurs and all of these conditions are true, click on Page Hostname and change this to Click Element by picking Choose Built in Variable.  On the next dropdown, change it to matches CSS selector and copy the following into the input field
    
    .tint-form form#formId button[type="submit"]
13. Click on Save on the Trigger
14. Click on Save for the Tag
15. At this point, you can test and publish the tag, see the instructions on how to do this below. 

How to add custom CSS to the Experience Page 

How to make a banner once submitted disappear

<script>

const button=document.getElementsByTagName(‘button”);

button.onclick=function(){

const banner = document.querySelector('.banner'); 

banner.style.display = "none";

};

</script>

How to listen for and track events on certain elements

(e.g. tracking the event of users submitting the form with Google Analytics)

1. Create a UA tag and set the type to event in GTM.
2. Fill your desired Event Action, Category and Label
3. Create the trigger of type Form Submission.
4. Put more conditions to target the button you desire

How to add retargeting pixels (e.g. Facebook Pixel)

Go to the following link: https://developers.facebook.com/docs/meta-pixel/get-started
The script will be ready after creating the Pixel and it can be added in the GTM - code is ready to use after completing the process of Pixel creation. 

How to implement a different cookie management tool 

<script> 

(function() { var ul = document.querySelector('footer .pages'); if (ul) { var li = document.createElement('li'); var button = document.createElement('button'); button.id = "ot-sdk-btn"; button.className = "ot-sdk-show-settings"; button.innerHTML = "Cookie Settings"; li.append(button); ul.append(li); } })(); 

</script>

How to Test and Publish Google Tags

Once you have created your Google Tag, you might want to test it to make sure it works before publishing it onto your Experience Builder page.  

To make sure your tag works as intended:

1. In Google Tag Manager, click Preview. The Tag Assistant will open
2. Enter the URL for your site.
3. To check if the tags that you have created are working, click Connect.  This will prompt Google Tag Manager to open your URL in a new window, and in the other window, it will tell you if it fired the tag or not.
4. Once you are happy with the changes, click Submit
5. Save the version with notes if you want to keep track of what changes have been made
6. Click Publish  

Google Analytics Example: 

Learning resources 

Google Tag Manager Help

Explore Google’s Dynamic Tagging Solutions - Course

If you have any more questions about Google Tag Manager, please contact Technical Support at support@trueloyal.com, and one of our team members will be happy to help you further.