Adding Marketing Cloud Tracking Codes to Shopify for Subscriber Personalization

Ed Gray

Adding Marketing Cloud Tracking Codes to Shopify for Subscriber Personalization

Marketing-Cloud-Eisntein-Tracking-Codes-on-Shopify
Ed Gray

Ed Gray

Marketing Automation Consultant
Share on linkedin
Share on facebook
Share on twitter

Salesforce Marketing Cloud’s tracking codes are essential to unlocking many of its advanced marketing automation features. If your business has a Shopify store, these tracking codes allow you to tailor communications to subscribers’ shopping behavior.

Whether you simply want to send an email based upon the product(s) a subscriber has viewed or start up Einstein’s recommendation engine—it begins with correctly installing tracking codes.

Unfortunately, figuring out how to install the codes that track subscriber behavior can prove challenging for non-experts. This step-by-step guide will help get you started installing the collect codes on any standard Shopify store, without the need of additional applications.

Before we get started, you should know that this guide assumes that you:

Now, let’s dive into how to add tracking codes to Shopify, so you can start personalizing Marketing Cloud communications based on subscriber behavior.

1. Installing the Base Collect Code

Every webpage that uses a Marketing Cloud tracking code needs the Base Collect Code installed first. In Shopify, install the following code in the theme.liquid file before the closing tag:

Make sure to replace the MID (member identification code) with your business unit unique identifier, not only for the Base Collect Code but for all of the code below.

2. Adding Subscriber Parameters to Outbound Links

Next, we need a way to identify a specific Marketing Cloud subscriber’s behavior on the website. One relatively easy way to do this is by passing the subscriber key or ID as a parameter in links from Marketing Cloud emails.

You could use Marketing Cloud’s Parameter Manager to automatically append the same parameters to all links, but this can interfere with other links you build that rely on other parameters.

Marketing Cloud_Shopify_02

Instead, we recommend working with Marketing Cloud’s support team to alter the Conversion Tracking Link that can be enabled on specific links in an email.

For example, we used the default ‘sfmc_sub=%%SubscriberID%%’ which can be used by checking the Conversion Tracking Link box in Email Studio on links that lead to the Shopify store.

3. Tracking Users

Now that we have parameters in links to help identify subscribers, we can use JavaScript to use the parameter in the User Collect Code.

Here is an example of the JavaScript to install at the bottom of theme.liquid template:

Remember to replace the MID and ‘sfmc_sub’ with the name of the parameter used for the unique Subscriber’s ID or Key.

Don’t be tricked by the use of ’email’ in the collect code—we can use any unique identifier that Marketing Cloud can map to the subscriber. In fact, you should NOT use an email address or any other Personally Identifiable Information (PII) in the tracking codes.

You can also ignore Salesforce instructions on only installing the User Tracking Code on login pages. We want to be able to identify subscribers and track their behavior by establishing a cookie regardless of whether they log into the Shopify store.

While this method has the benefit of establishing cookies for subscribers without requiring them to log in, keep in mind it can cause issues when subscribers forward their email to others or copy and paste it into a browser.

4. Tracking Product Views

With subscribers now being identified through the User Collect Code, it’s time to track what products they’re viewing.

Install the following code in the product.liquid template file in your Shopify theme:

Remember to change the MID to your Marketing Cloud ID.

5. Streaming Catalog Updates

Tracking item views is easy—keeping your product catalog up to date is a bit more difficult. No one wants to constantly upload a new catalog every time you add, remove, or adjust a product on Shopify.

There are essentially two options for automatically keeping the catalog up to date:

  • Batch uploads
  • Streaming Catalog Updates

Batch uploads are a possible solution, but require regularly exporting a .csv from your Shopify store to Marketing Cloud’s SFTP (this also will require either an additional application or API development). Note that many of the Shopify applications once capable of automatically exporting a catalog are no longer compatible with Salesforce’s strict SFTP rules.

Instead, let’s use Streaming Catalog Updates in Shopify by installing the following code on your product.liquid template:

Remember to update the MID and the domain of your Shopify store for the URL attribute. This is a simple product catalog with a single primary category attribute and multi-value Tags attribute. If your catalog requires more attributes, you’ll need to map them to the Shopify object here.

Make sure to turn on Streaming Catalog Updates in the Implementation dashboard. Next, whitelist the domain of your store as well as the standard cdn.shopify.com domain where product images may be hosted.

6. Troubleshooting Collect Codes

With the Base, User, Item View and Streaming Catalog Update codes installed, it’s time to check if they are working. Navigate to the Status dashboard under either Web or Email Einstein Recommendations to see which of the installed codes are working.

Remember, you won’t get identified sessions until users click on a link that passes their Subscriber ID or Key. You can test the User code by sending a test email to yourself.

Unless you’re a superhuman coder, there are likely to be mistakes to work through. Don’t worry. The remaining tracking codes are relatively simple—the Streaming Catalog Updates and User Code are the tricky ones that we must get to work first.

Pro tip: You can use the Network tab in Chrome’s Developer Inspector tool. Filter for ‘IGO’ and make sure any kind of ad or script blockers are turned off. Navigate the website and check the payload of the tracking codes to see what needs to be fixed.

7. Tracking Cart Activity

To track what items are in a subscriber’s cart, we’ll use JavaScript to listen for the Add-to-Cart button being clicked on a product’s page.

Add-to-Cart buttons can vary depending on your Shopify theme, so you will need to know the CSS class or ID for JavaScript to identify the button(s) that should trigger the event.

This Shopify store’s Add-to-Cart button has a class of ‘.product-form__cart-submit’. When a button with that class is clicked, the cart tracking collect code is triggered. Remember to replace it with the CSS class of your Shopify store’s Add-to-Cart button(s).

It’s important to note that the cart tracking code will overwrite any existing information in the subscriber’s cart. This is why the tracking code needs to loop through all the items that are already in their Shopify cart, while adding the new product as well.

Next, we should also track cart activity on the actual cart page by inserting the following code into the cart’s Liquid template:

The above code will let Marketing Cloud know when a subscriber’s cart is empty. As always, remember to change the MID to your Marketing Cloud’s unique identifier.

8. Tracking Purchases

Instead of updating a Liquid template file, we’ll add the following collect code to the additional scripts section of the checkout settings in Shopify:

We need to include the base tracking code again because Shopify’s checkout process is handled on a third-party site.

Marketing-Cloud_Shopify_05

Since shoppers may return to their order confirmation page several times, we need to include Liquid code to make sure the purchase tracking code is only initiated the first time a user visits the page. We do this with the ‘first_time_accessed’ property—you can find a full tutorial here. This ensures a single purchase is not recorded more than once.

9. Tracking Searches

To track search activity, replace the MID and install the following code in the search Liquid template file:

10. Tracking Category Views

Categories are referred to as collections in Shopify. Install the category collect code in the collection Liquid template:

Once you complete this step, congratulate yourself! Your Shopify store is now tracking the behavior of your Marketing Cloud Subscribers.

Be sure to check the Status dashboard again to make sure everything is working properly and fix any issues.

11. Checking IGO Data Extensions

With the catalog uploaded and collect codes now installed, the IGO data extensions should start populating.

You’ll notice the user_id is mapped to the Subscriber ID or Key in the ’email’ column of the IGO_Profiles extension. This user_id is the external key to map the subscriber’s activity inside the IGO_Views and IGO_Purchase extensions.

Finally, with some SQL queries and the _Subscribers data view, you’re ready to set up some sendable data extensions based upon what products a subscriber viewed or purchased.

With some more time and data, you can also start using the Einstein email and web product recommendations and behavioral triggers.

Wrapping Up

Now that your Shopify store is better integrated with Marketing Cloud, you can personalize communications to buyers based on past shopping behaviors and products they’ve shown interest in.

We hope this tutorial helps improve the buying experience for your customers and drive more sales for your Shopify store.

If you need help with this integration or any further guidance for customizing your Marketing Cloud instance, explore our Marketing Cloud services and do not hesitate to reach out to LearningCurv for help.

This resource was originally posted on DEV by LearningCurv Marketing Automation Consultant Ed Gray.

Need help mastering Salesforce marketing automation?

LearningCurv_Consultant_Devin_Peach