TikTok

Introduction

Chord supports the TikTok Conversions Segment destination. This destination sends website events from your Chord website to the TikTok events API, which allows you to see website events in TikTok.

Segment Configuration

Review the official Segment destination documentation for general configuration. After you've configured the destination, there are a couple of additional steps that improve the quality of the integration.

Add event mapping for “Complete Payment” event

The TikTok Segment destination does not include a default mapping for TikTok’s “Complete Payment” event, which is one of the events TikTok uses to measure transactions. This mapping must be added manually in the Segment destination configuration for TikTok to report any transactions.

To configure, navigate to the TikTok destination in Segment and select the “Mappings” tab. Select "New Mapping" and choose "Report Web Event."

First, in the mapping configuration, enter "Order Completed" as the event name:



Second, enter "CompletePayment" as the value to map to TikTok's "Event Name":



Now "Order Completed" events will appear as "CompletePayment" events in TikTok.

Configure content type for events

You might see this error in the TikTok diagnostics tab:

To fix this error, navigate to the TikTok destination in Segment and select the “Mappings” tab. For each event that sends product data (by default, "View Content," "Product Added," "Checkout Started," and "Order Completed"), choose “Edit Mapping”.

Find the "Contents" section on the mapping page and make sure "content_type" is set to "product." (The default is properties.category.)



Website Configuration

Add ttclid property to Segment events for attribution

Optionally, you can include a ttclid property on Segment events to match website visitor events with clicks from TikTok ads. See TikTok's documentation for more background.

To add the ttclid property to Segment events that are sent by Chord’s SDKs, we recommend using Segment analytics.js middleware to add the property. Segment middleware allows you to intercept events before they are sent to Segment and add additional data.

Here's an example of how you might retrieve the ttclid from the URL and append it to Segment events:

// This React component should be included at the root of the application.
// It should only be mounted once.

import { useEffect } from 'react'

const getCookie = name => {
  return document.cookie.split('; ').reduce((r, v) => {
    const parts = v.split('=')
    return parts[0] === name ? decodeURIComponent(parts[1]) : r
  }, null)
}

const Tracking = () => {
  useEffect(() => {
    try {
      const params = new URLSearchParams(window.location.search)

      // retrieve ttclid
      const ttclid = params.get('ttclid') || getCookie('ttclid')

      // if ttclid is present in the URL, store it in a cookie so it can be accessed later
      if (params.get('ttclid')) {
        document.cookie = `ttclid=${ttclid}`
      }

      // add Segment middleware that adds a ttclid property to every tracking event
      window.analytics?.addSourceMiddleware(({ payload, next }) => {
        if (ttclid) {
          payload.obj.properties.ttclid = ttclid
        }
        next(payload)
      })
    } catch (error) {
      console.error(error)
    }
  }, [])

  return null
}

export default Tracking