Google Tag Manager
This article provides a step-by-step guide on how to add the Braze Web SDK to your website using Google Tag Manager.
Google Tag Manager lets you remotely add, remove, and edit tags on your website, without requiring a production code release or engineering resources.
Braze Tag Templates
There are two Google Tag Manager templates built by Braze: the Initialization Tag and Actions Tag.
Both tags can be added to your workspace from Google’s Community Gallery, or by searching for Braze when adding a new tag from the Community Templates.
Initialization Tag Template
Use the Initialization Tag to add the Braze Web SDK to your website.
1. Choose the “Initialization Tag” from the Community Gallery
Search for “Braze” in the Community Template Gallery, and choose the Braze Initialization Tag as shown below:
2. Configure App Settings
Enter your Braze SDK API Key and SDK Endpoint, which can be found in your Dashboard’s App Settings.
3. Initialization Options
Choose from the optional set of additional initialization options as described in the Initial Setup guide.
4. Verify and QA
Once you’ve deployed this tag, there are two ways you can verify a proper integration:
First, using Google Tag Manager’s Debug Mode, you should see the Braze Initialization Tag has been triggered on your configured pages or events.
Second, you should see network requests made to Braze, and the global window.appboy
library should now be defined on your webpage.
Actions Tag Template
The Braze Actions Tag template lets you trigger custom events, track purchases, change user IDs, and stop/resume tracking for privacy requirements.
Changing User External ID
The Change User Tag Type calls the changeUser
method.
Use this tag whenever a user logs in, or is otherwise identified with their unique “external_id” identifier.
Be sure to enter the current user’s unique ID in the “External User ID” field, typically populated using a datalayer variable sent by your website.
Log Custom Events
The Custom Event Tag Type calls the logCustomEvent
method.
Use this tag to send Custom events to Braze, optionally including Custom event properties
Enter the Event Name, either using a variable or by typing in an event name.
Use the Add Row button to add event properties.
Track Purchase
The Purchase Tag Type calls the logPurchase
method.
Use this tag to track purchase to Braze, optionally including Purchase properties.
The Product ID and Price fields are required.
Use the Add Row button to add Purchase properties.
Stop and Resume Tracking
Sometimes, you might be required to disable or re-enable Braze tracking on your website, for example, after a user indicates they’ve opted out of web tracking for privacy reasons.
Use the Disable Tracking or Resume Tracking Tag Type to disable web tracking or re-enable web tracking, respectively.
Custom User Attributes
Custom user attributes are not available due to a limitation in Google Tag Manager’s scripting language. To log custom attributes, create a Custom HTML tag with the following content:
1
2
3
<script>
window.appboy.getUser().setCustomUserAttribute("attribute name", "attribute value");
</script>
Troubleshooting Steps
Enable Tag Debugging
Each Braze Tag template has an optional “GTM Tag Debugging” checkbox which can be used to log debug messages to your webpage’s Javascript console.
Enter Debug Mode
Another way to help debug your Google Tag Manager integration is using Google’s Preview Mode feature.
This will help identify what values are being sent from your webpage’s datalayer to each triggered Braze tag, and will also explain which tags were or were not triggered.