TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide
Last updated, June 2023

Congratulations on connecting your Salesforce Commerce Cloud (SFCC) to TikTok!


During the integration setup, a pixel was created but was not installed across your storefront. To maximize the TikTok for Business integration, follow the steps to set up event tracking and sync shopper activities.


After syncing shopper activities and web user events, you will be able to:

  • ​Use product catalog-based ad formats

  • ​Create custom audiences from shopper activities

  • Enable ROAS reporting and Value Based Optimization (VBO)


TikTok for Ads on Salesforce Commerce Cloud offers server-based and browser-based web event tracking solutions.

  • To set up server-based event tracking or Events API for web, refer to TikTok for Business documentation under Option 1 of Sync Shopper Activities and Monitor Web Events.

  • ​To set up browser-based event tracking, follow the steps in this guide to install TikTok pixel.


There are 2 methods for browser-based pixel implementation. Choose one that best fits your event tracking needs:

OR


How to manually install TikTok pixel

You'll need:

  • ​Pixel base code (found in Salesforce Commerce Cloud cartridge)

  • Standard event scripts and selected parameters (see Suggested Web User Events)

  • ​Scripts for Advanced Matching (recommended)

  • ​Access to your storefront source code


Steps

​1. Follow Salesforce-provided documentation from Link Marketplace to install TikTok for Business integration as a new social channel.

2. ​After completing the integration setup, return to the SFCC Business Manager homepage where you will see your connected TikTok application details:

  • ​Business Center ID

  • ​Pixel ID

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image1

3. Before creating a campaign, follow the instructions here to manually inject TikTok Pixel and selected user event scripts into your website source code.

  • ​If you use the pixel base code template from the TikTok Business Help Center, remember to replace the placeholder pixel ID with the alphanumeric Pixel ID found in your Salesforce Commerce Cloud Business Manager.

    • ​Base code: Should be added to all storefront pages, or any page where you plan to track user events

    • ​Event codes: Enable you to report on the specific actions or events visitors perform for conversion purposes. Event code(s) will not work without the base code.

4. Verify pixel setup using TikTok's web diagnostic tools.

5. ​SFRA-based storefronts will also need to add this script to the bottom of "htmlHead.isml" inside your storefront cartridge to activate web event tracking.

<isprint value="${dw.system.HookMgr.callHook('app.template.htmlHeadTikTok', 'htmlHead', pdict) || ''}" encoding="off" />


For example:

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image2

How to install TikTok pixel using Tag Manager

You'll need:

  • ​Pixel base code (found in Salesforce Commerce Cloud cartridge)

  • Standard event scripts and selected parameters (see Suggested Web User Events)

  • ​Scripts for Advanced Matching (recommended)

  • ​Access to Google Tag Manager container with editing permissions


Steps

​1. Follow Salesforce-provided documentation from Link Marketplace to install TikTok for Business integration as a new social channel.

2. ​After completing the integration setup, return to the SFCC Business Manager homepage where you will see your connected TikTok application details:

  • ​Business Center ID

  • ​Pixel ID

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image3

3. Before creating a campaign, refer to "Option 2: Install the pixel using Developer Mode" in Get Started with Google Tag Manager to install TikTok pixel and event codes using a tag management tool (e.g. Google Tag Manager).

  • ​At “Step 1.8: Paste the TikTok Pixel code in the HTML container in Google Tag Manager”, paste the base code from the Commerce Integration cartridge into the HTML container.

    • ​The alphanumeric pixel ID found in the base code script should exactly match the Pixel ID listed on your Salesforce Commerce Cloud Business Manager homepage.

    • ​Base code: should be added to all storefront pages or any page where you plan to track user events

  • ​Follow "Step 2: Create event tags" to set up selected user events as Custom HTML tags

    • ​Event codes: enable you to report on the specific actions or events visitors take for conversion purposes. Event code(s) will not work without the base code

4. Verify pixel installation using TikTok's web diagnostic tools. 


Suggested Web User Events + Pixel Enhancements

Web Events for Commerce

For E-commerce clients, we recommend creating an event for each step along the customer journey on your website. To see the full list of supported event types, refer to Install Pixel using code.


At a minimum, commerce advertisers will need these events and parameters to power commerce ad formats:


Event Name

Event Code

Parameters (Required)

Parameters (Recommended)

Baseline web user events required for catalog-based ad formats

View Content

ttq.track('ViewContent')

- ​'content_id' or 'contents'

•- 'quantity'

- 'price'

- 'currency'

- 'value'

- 'description'

- 'product_url'

- ​'image url'

- ​'availability'

- 'content_name'

- 'content_category'

- ​'content_type'


Add to Cart

ttq.track('AddToCart')

- ​'content_id' or 'contents'

- 'quantity'

- 'price'

- ​'currency'

- ​'value'

- 'description'

- ​'product_url'

- 'image url'

- ​'availability'

- 'content_name'

- 'content_category'

- 'content_type'


Complete Payment

ttq.track('CompletePayment')

- ​'content_id' or 'contents'

- 'quantity'

- ​'price'

- 'currency'

- ​'value'

- ​'description'

- 'product_url'

- ​'image url'

- 'availability'

- 'content_name'

- 'content_category'

- 'content_type'


Advanced Matching: Pixel Enhancement

Set up the Pixel Enhancement feature, Advanced Matching, to send privacy-safe customer information to better match website events with ads on TikTok. With Advanced Matching added to your user events, you will also be able to capture more events from cross-session matching, build bigger audiences, and boost campaign optimization. 


Manual Advanced Matching

Manual Advanced Matching is the passing of customer information to TikTok from your website. This can be implemented using code for each event on your website. You can enable Manual Advanced Matching in the data sharing settings of the Salesforce Commerce Cloud setup. With this option, you have the flexibility to configure what information and for which event you want to pass to TikTok.


TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image4

To maximize opportunities for conversions and ROAS, we recommend inputting Advanced Matching code to each event on your website in order to pass back customer information to match conversions with ads on TikTok.


Before you begin, you'll need:

  • ​Access to the website's code

  • ​The ability to add privacy-safe audience data to parameters

  • ​Events set up in the website's code at this point


Get started by referring to our Advanced Matching implementation guide.


TikTok on SFCC Set Up Guide for Agency Clients

If you're an existing advertiser and/or an agency client, follow this guide to learn how to connect your Pixel and/or share your catalog to ensure your SFCC Business Manager is connected to both assets. Once Pixel and Catalog are connected to SFCC Business Manager, your agency can activate catalog-based ad formats.


Before getting started: Pixel, Catalog, and Ad Account need to live under the same Business Center. Access to existing assets can be granted by a TikTok for Business user with admin-level permissions.


The merchant should determine who will own the Ad Account that runs their ads. We recommend using either:

  • ​An existing Ad Account owned by your agency

  • ​A new Ad Account owned by the client


How to share a catalog between Business Centers

Clients should follow these steps to share their catalog with their Agency partner.

Example scenario: Client Business Center owns catalog (Business Center A), but Agency Business Center (Business Center B) needs access to their catalog in order to launch catalog-based ad campaigns on client's behalf.


Steps

1. Business Center A admin logs into Business Center and finds the catalog to be shared in Assets > Catalogs

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image5

2. ​Navigate to the Partners tab and click Add Partner to grant partner Business Center access to the catalog.

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image6

  • Input the Business Center ID of Business Center B, which is the target Business Center you want to share this catalog with.

    • ​For permissions, we recommend selecting Ad Promotion if the owner of this catalog wants to enable the users of Business Center B to deliver ads with this catalog, but not to modify the product information in it.

    • ​Otherwise, you can set Catalog Management permission for this partner Business Center.

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image7

  • ​Once confirmed, Business Center B is listed in the catalog's partner list.

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image8

3. ​Verify the changes in the new Business Center

  • ​Business Center B admin needs to verify if this catalog has been successfully shared, which can be found in their Business Center.

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image9

4. ​Add members to the catalog by clicking the Add Members button.

  • ​Business Center B admin has to add members to this catalog so they can have access to this catalog when promoting within ad accounts.

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image10


For example, we're adding the following user as a new member of this asset and have given 'Ad Promotion' permission to them.

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image11

  • ​Now, this user will be able to create campaigns using this catalog in the ad accounts, which she has access to in this Business Center.


If a pixel was already connected to this catalog, no additional steps are required.


How to connect an existing pixel

Follow the steps listed above in the section, "Connect an Existing TikTok Pixel". The shared pixel should then be connected to your product catalog.


FAQs

If I'm an existing advertiser and already have a TikTok Pixel installed across my storefront, can I use my existing pixel?

Depending on the pixel's age, this may vary.

  • ​If your pixel is less than 2 months old, it is recommended to create and install a new pixel by following the instructions in this guide.

  • ​If your pixel is more than 2 months old, you have the option to connect the existing pixel to your SFCC Business Manager by connecting the pixel to your product catalog.


Note: In either setup, the Pixel needs to be connected to your product catalog in SFCC to support matching between events and your catalog.


How do I connect an existing pixel with a catalog?

You'll need to add or transfer your existing Pixel to your TikTok Business Center. A Business Center is created or synced during the onboarding process.

1. Complete "Step 2b. Share a Pixel with other Business Centers" found in Pixel Sharing in Business Center

2. ​Provide the Business Center ID from your Salesforce Commerce Cloud Business Manager homepage (as shown below) to transfer pixel to this Business Center

TikTok on Salesforce Commerce Cloud Pixel + Catalog Setup Guide-image12

Content