Google Tag Manager
This article provides a step-by-step guide on how to add the Braze Web SDK to your website using the 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 the 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.
Step 1: Select the Initialization Tag
Search for Braze in the community template gallery, and select the Braze Initialization Tag.
Step 2. Configure settings
Enter your Braze API app identifier key and SDK endpoint, which can be found in your dashboard’s Manage Settings page.
Step 3. Choose initialization options
Choose from the optional set of additional initialization options described in the Initial setup guide.
Step 4: Verify and QA
Once you’ve deployed this tag, there are two ways you can verify a proper integration:
- Using Google Tag Manager’s debug move, you should see the Braze Initialization Tag has been triggered on your configured pages or events.
- You should see network requests made to Braze, and the global
window.braze
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 or 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 data layer 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 by either using a variable or typing 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 purchases 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 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.braze.getUser().setCustomUserAttribute("attribute name", "attribute value");
</script>
The GTM template does not support nested properties on events or purchases. You can use the preceding HTML to log any events or purchases that require nested properties.
Default user attributes
Default user attributes, such as a user’s first name, should be logged in the same manner as custom user attributes. Ensure the values you’re passing in for default attributes match the expected format specified in the User class documentation.
For example, the gender attribute can accept any of the following as values: "m" | "f" | "o" | "u" | "n" | "p"
. Therefore to set a user’s gender as female, create a Custom HTML tag with the following content:
1
2
3
<script>
window.braze.getUser().setGender("f")
</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 data layer to each triggered Braze tag and will also explain which tags were or were not triggered.