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:

1. Using Google Tag Manager’s debug move, you should see the Braze Initialization Tag has been triggered on your configured pages or events.
2. 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>

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.