# TikTok Ads Web Device Mode Integration

<p>RudderStack lets you send your event data to TikTok Ads via <a href="https://www.rudderstack.com/docs/destinations/rudderstack-connection-modes/#device-mode" >device mode</a> using the native web SDK.</p>
<p>Find the open source JavaScript SDK code for this destination in the <a href="https://github.com/rudderlabs/rudder-sdk-js/tree/develop/packages/analytics-js-integrations/src/integrations/TiktokAds" >GitHub repository</a>.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="identify">Identify</h2><p>You can use the <a href="https://www.rudderstack.com/docs/event-spec/standard-events/track/" ><code>identify</code></a> call to identify a user in TikTok ads.</p>
<p>The following snippet highlights a sample <code>identify</code> call sent to TikTok Ads:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">rudderanalytics.identify(
  &#34;1hKOmRA4GRlm&#34;, {
    email: &#34;alex@example.com&#34;,
    name: &#34;Alex Keener&#34;
  }, {
    externalld: [{
        id: &#34;external_id_1&#34;,
        type: &#34;tiktokExternalId&#34;
    }]
  }
);</code></pre></div>
</div>
<p>In TikTok Ads, an external ID is an identifier that uniquely represents a user. Use the <code>externalId</code> parameter to match the <code>id</code> with the TikTok user. Make sure to set the type as <code>tiktokExternalId</code>.</p>
<p>Setting an external ID for a user is helpful in increasing match rates across channels and boost your ad measurements and optimization. For more information on using external IDs, see <a href="https://ads.tiktok.com/marketing_api/docs?id=1765942670613506" >TikTok documentation</a>.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="traits-mappings">Traits mappings</h3><p>RudderStack maps the following traits to the TikTok Ads fields:</p>
<table>
  <thead>
      <tr>
          <th>RudderStack trait</th>
          <th>TikTok Ads trait</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>properties.phone</code> <br /> <code>properties.number</code></td>
          <td><code>phone</code></td>
      </tr>
      <tr>
          <td><code>properties.email</code></td>
          <td><code>email</code></td>
      </tr>
      <tr>
          <td><code>externalId.tiktokExternalId</code></td>
          <td><code>tiktokExternalId</code></td>
      </tr>
  </tbody>
</table>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="track">Track</h2>
<blockquote class="warning">
  <div class="tip-quote">
    
    <div class="tip-text">This destination does not strictly adhere to the <a href="https://www.rudderstack.com/docs/event-spec/ecommerce-events-spec/" >RudderStack Ecommerce Event Spec</a>.</div>
  </div>
</blockquote>
<p>You can use the <a href="https://www.rudderstack.com/docs/event-spec/standard-events/track/" ><code>track</code></a> call to capture user events along with the associated properties.</p>
<p>A sample <code>track</code> call is shown below:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">rudderAnalytics.track(&#34;Add To Cart&#34;, {
  eventId: &#34;123&#34;,
  category: &#34;cat1&#34;,
  product_id: &#34;product&#34;,
  contents: [{
      &#34;price&#34;: 8,
      &#34;quantity&#34;: 2,
      &#34;content_type&#34;: &#34;socks&#34;,
      &#34;content_id&#34;: &#34;1077218&#34;
    },
    {
      &#34;price&#34;: 30,
      &#34;quantity&#34;: 1,
      &#34;content_type&#34;: &#34;dressing&#34;,
      &#34;content_id&#34;: &#34;1237218&#34;
    }
  ],
  currency: &#34;USD&#34;,
  email: &#34;alex@example.com&#34;,
  phone: &#34;1234567890&#34;
});</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="event-mapping">Event mapping</h3><p>You can use the <a href="https://www.rudderstack.com/docs/destinations/streaming-destinations/tiktok-ads/setup/#event-settings" >Event mapping settings</a> in the dashboard to map your events to the below <a href="https://ads.tiktok.com/help/article/supported-standard-events" >TikTok standard events</a>:</p>
<p><details class="rs-acc">
	<summary class="rs-acc__btn">
		
		<strong>List of supported TikTok standard events</strong>
	</summary>
	<div class="rs-acc__panel">

<br/>
<ul>
<li><code>Add Payment Info</code></li>
<li><code>Add to Cart</code></li>
<li><code>Add to Wishlist</code></li>
<li><code>Application Approval</code></li>
<li><code>Click Button</code></li>
<li><code>Complete Payment</code></li>
<li><code>Complete Registration</code></li>
<li><code>Contact</code></li>
<li><code>Customize Product</code></li>
<li><code>Download</code></li>
<li><code>Find Location</code></li>
<li><code>Initiate Checkout</code></li>
<li><code>Lead</code></li>
<li><code>Place an Order</code></li>
<li><code>Purchase</code></li>
<li><code>Schedule</code></li>
<li><code>Search</code></li>
<li><code>Submit Application</code></li>
<li><code>Submit Form</code></li>
<li><code>Subscribe</code></li>
<li><code>Start Trial</code></li>
<li><code>View Content</code></li>
</ul>

</div>
</details>

<br /></p>

<blockquote class="warning">
  <div class="tip-quote">
    
    <div class="tip-text"><p>TikTok has recently updated the following standard events:</p>
<ul>
<li><code>Submit Form</code> is renamed to <code>Lead</code>.</li>
<li><code>Complete Payment</code> is renamed to <code>Purchase</code>.</li>
</ul>
<p>Although TikTok still supports the old events (<code>Submit Form</code> and <code>Complete Payment</code>), RudderStack recommends using the new events (<code>Lead</code> and <code>Purchase</code>) to avoid any issues.</p>
</div>
  </div>
</blockquote>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="property-mappings">Property mappings</h3><p>RudderStack maps the following event properties to the corresponding TikTok Ads properties:</p>
<table>
  <thead>
      <tr>
          <th>RudderStack property</th>
          <th>TikTok Ads property</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>context.traits.email</code> <br /> <code>traits.email</code> <br /> <code>properties.email</code></td>
          <td><code>email</code></td>
      </tr>
      <tr>
          <td><code>context.traits.phone</code> <br /> <code>traits.phone</code> <br /> <code>properties.phone</code></td>
          <td><code>phone</code></td>
      </tr>
      <tr>
          <td><code>testEventCode</code></td>
          <td><code>test_event_code</code></td>
      </tr>
      <tr>
          <td><code>properties.event_id</code></td>
          <td><code>event_id</code></td>
      </tr>
      <tr>
          <td><code>properties.contents</code></td>
          <td><code>contents</code></td>
      </tr>
      <tr>
          <td><code>properties.category</code></td>
          <td><code>category</code></td>
      </tr>
      <tr>
          <td><code>properties.status</code></td>
          <td><code>status</code></td>
      </tr>
      <tr>
          <td><code>properties.name</code></td>
          <td><code>content_name</code></td>
      </tr>
      <tr>
          <td><code>properties.product_id</code> <br /> <code>properties.productId</code></td>
          <td><code>content_id</code></td>
      </tr>
      <tr>
          <td><code>properties.contentType</code> <br /> <code>properties.content_type</code></td>
          <td><code>content_type</code></td>
      </tr>
      <tr>
          <td><code>properties.currency</code></td>
          <td><code>currency</code></td>
      </tr>
      <tr>
          <td><code>properties.value</code></td>
          <td><code>value</code></td>
      </tr>
      <tr>
          <td><code>properties.description</code></td>
          <td><code>description</code></td>
      </tr>
  </tbody>
</table>

<html lang="en">
<blockquote class="info">
  <div class="tip-quote">
    
    <div class="tip-text">Send the <code>testEventCode</code> property to test a connection in TikTok Ads.</div>
  </div>
</blockquote>

</html>
<p>For custom events, RudderStack maps only the <a href="https://github.com/rudderlabs/rudder-transformer/blob/0e1429663d167a2c5cded0d9130374eb586a18c0/src/v0/destinations/tiktok_ads/data/TikTokTrack.json" >standard fields</a> supported by TikTok Ads and drops all other fields in the event. See <a href="https://business-api.tiktok.com/portal/docs?id=1741601162187777" >TikTok Ads standard fields</a> documentation for more information.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="page">Page</h2><p>RudderStack does not send any page-related properties to TikTok. Once you make a <a href="https://www.rudderstack.com/docs/event-spec/standard-events/page/" ><code>page</code></a> call, TikTok automatically fetches all the page-related properties.</p>
<p>The following snippet highlights a sample <code>page</code> call:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">rudderanalytics.page();</code></pre></div>
</div>
<br />
