Integrations
TikTok

8min
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:
The content type for one or more of your events is invalid. Content type must be either "product" or "product_group".
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:
JS
|
// 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

// 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
﻿
﻿
Updated 27 Apr 2023
Did this page help you?
TABLE OF CONTENTS
Introduction
Segment Configuration
Add event mapping for “Complete Payment” event
Configure content type for events
Website Configuration
Add ttclid property to Segment events for attribution