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 https //segment com/docs/connections/sources/catalog/libraries/website/javascript/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