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.