Getting started with Shopify

Implementing Braze Web SDK via Shopify ScriptTag

Shopify ScriptTag is a remote JavaScript code loaded into the pages of your store or the order status page of checkout. When a store page is loaded, Shopify will check to see if any script tags need to be loaded to the site page.

If you want to get started with Braze quickly, you have the option to allow Braze to load a pre-defined script for the Braze Web SDK directly onto your Shopify store site.

How it works with the Shopify integration

When your Shopify site is loaded, Shopify will check to see if any script tags need to be loaded to the page. During the process, the Braze Web SDK scripts will be loaded onto the pages of your store or the order status page of checkout.

We’ll also add pre-defined scripts if you have selected product viewed, product clicked, and abandoned cart events that require Shopify ScriptTag or in-app messaging as a channel.

How to enable

To automatically enable the Braze Web SDK scripts as part of your integration, select the supported Shopify ScriptTag events or enable in-app messaging as a channel during your Shopify integration setup.

From the Shopify setup composer, the events denoted with an asterisk (*) are supported by the Web SDK. If you select these events or include in-browser messaging, Braze will add the Web SDK implementation via Shopify ScriptTag to your Shopify store as part of your setup.

Shopify email capture forms and user reconciliation

Capture forms obtain identifiable customer information early in the customer’s lifecycle for downstream messaging and engagement.

The Web SDK tracks Shopify onsite behavior and anonymous users by using the device_id. The Braze Shopify ScriptTag integration assigns emails from Shopify email capture forms, such as a newsletter signup, to the user’s device_id.

Typical email capture forms include:

• Email capture form
• Newsletter signup form

There are two ways to reconcile the user’s email and device_id:

• Using the Braze automated email capture script
• Calling the setEmail or setPhoneNumber methods

Capturing email or phone signups

With Braze, you can use our email and SMS and WhatsApp sign-up forms to leverage the Web SDK and in-app messages.

If using a Shopify email or phone number capture, or a third-party capture form, you can be set directly on the user that is tracked by the Braze Web SDK. For example, if you obtain the customer’s email address, you can set it on their user profile like this:

1
braze.getUser().setEmail(<email address>);

For details on setting these values, refer to these Javascript resources:

• Setting the user’s email
• Setting the user’s phone number

You can also set the users’ subscription state as you collect their email or phone number, like this:

1
braze.getUser().setEmailNotificationSubscriptionType(braze.User.NotificationSubscriptionTypes.SUBSCRIBED);

For details on setting these values, refer to these Javascript resources:

• Setting the user’s email notification subscription type
• Adding the user to a subscription group

Example third-party capture form implementation

1. In theme.liquid, copy the following snippet in the head tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  const emailInputPoller = setInterval(()=>{
    if (document.getElementById('{FORM_ID}')) {
      document.getElementById('{FORM_ID}').addEventListener("submit",
        function() {  
          var email = document.getElementById('{INPUT_EMAIL_ID}').value
          braze.getUser().setEmail(email)
        }
      );
    }
    clearInterval(emailInputPoller)
  }, 2000)
</script>

2. We first call setInterval so that the script is loaded first
3. Replace {FORM_ID} with the element ID of the form you want to capture (such as “ContactFooter”.)
4. Replace {INPUT_EMAIL_ID} with the element ID of the email input field inside the form
5. When the form is submitted, the script will call setEmail with the email input value
6. After the script loads, we call clearInterval so that it loads only once

What to expect after implementation

Braze Web SDK initialization

The Web SDK will initialize upon session start. Braze will need to collect the device_id for tracking anonymous user data as other identifiers like the Shopify customer ID, email, or phone number may not be readily available for guest visitors of your Shopify store.

The device_id will also be used to reconcile user data to the anonymous user profile as a customer provides more identifiable information (such as an email address or phone number) after the checkout process.

Braze Web SDK version

The current version of the Braze Web SDK via Shopify ScriptTag integration is v4.2.

Monthly Active Users (MAU)

The Web SDK tracks sessions of your Shopify customers and guests. As a result, this will accrue as MAU within your Braze dashboard reporting and toward your MAU allotments. It is important to note that anonymous users will also count toward your MAU. For mobile devices, anonymous users are device-dependent. For web users, anonymous users are browser cache-dependent.