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
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: 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:
Step 2. Configure Settings
Enter your Braze SDK API Key and SDK Endpoint, which can be found in your dashboard’s Settings page.
Step 3. Choose Initialization Options
Choose from the optional set of additional initialization options as 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:
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
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
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.
The Purchase Tag Type calls the
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>
Default User Attributes
Default user attributes, such as a user’s first name, should be logged in the same manner as custom user attributes. Make sure 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.appboy.getUser().setGender("f") </script>
Enable Tag Debugging
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.