Published on

TikTok Pixel Custom Code Integration

TikTok Pixel Custom Code Integration

In this session, I will be covering the implementation of TikTok Pixel using custom code. We strongly recommend reviewing our Pixel Events Builder if you haven’t already done so, as this contains essential fundamentals of pixel implementation. This session is technical-heavy and primarily targeted at developers. However, we will aim to make it as comprehensible as possible for everyone.

Creating a Custom Code Pixel

  1. Head over to the TikTok Events Manager:

    • Click on "Setup Web Events."
    • Provide a name for your web events.

  2. Select TikTok Pixel:

    • Choose "Manually Install Pixel Code."
    • Opt for "Custom Code."
    • Copy the base code onto your clipboard and proceed.

  3. Review Settings:

    • We covered these settings in the Events Builder. It is crucial to:
    • Keep first-party cookies on, as turning them off will impact attribution.
    • Turn on auto-advanced matching with email and phone for better attribution in cross-device multi-session scenarios.

  4. Install Pixel Helper:

    • Click "Next" and follow the instructions to install Pixel Helper.
    • Refer to our previous events builder session for more detailed information about Pixel Helper.

  5. Accessing the Pixel Dashboard:

    • If an existing pixel has the base code installed for Events Builder, you don't need a new pixel.
    • To retrieve your base code:
      • Navigate to your already created pixel, click "Add Events," select "TikTok Pixel."
      • Choose "Manually Install Pixel Code," then "Custom Code." Copy the base code.

  6. Installing the Base Code:

    • Paste the base code into the head of your layout or theme file. Ensure it's replicated across all layouts if using different ones.

  7. Verify Installation:

    • Deploy your changes and verify that the default page view from the base code is firing using Pixel Helper.

Implementing Custom Events

Choosing from any of the 14 event types available, let's walk through a simple e-commerce user journey including implementing key events like view content, add to cart, initiate checkout, and complete payment.

View Content Event

To implement a view content event:

  • Add the base code (if not already firing).
  • Add ttq.track('ViewContent').
  • Include logic specific to your requirements (like user interactions, time on page, etc.).
  • Add parameters such as content_id, content_type, content_name, price, etc., for better optimization and reporting.

Add to Cart Event

These steps will help implement the add to cart event:

  • Add the base code.
  • Add ttq.track('AddToCart') along with the required parameters.
  • Pass additional parameters for better tracking (quantity, value, currency).

Initiate Checkout Event

This event should trigger when a user lands on the cart page. Here's how:

  • Use an array to pass multiple items in the cart.
  • Add ttq.track('InitiateCheckout') with the necessary parameters.

Complete Payment Event

To track completed payments:

  • Implement on the thank-you page.
  • Add ttq.track('CompletePayment') with appropriate parameters.

Advanced Matching

Implementing advanced matching (manual method) involves:

  • Adding ttq.identify() before each event.
  • Passing dynamic values for email and phone numbers.
  • For manual advanced matching, pass SHA-256 encrypted values if necessary.

We recommend combining auto and manual advanced matching for the best results. Auto advanced matching may not always detect users' emails or phone numbers on your HTML5 site.

Conclusion

In this session, we have covered:

  • Setting up a custom code pixel.
  • Implementing events via custom code.
  • Passing content parameters for shopping ads.
  • Emphasizing value and currency for reporting, optimization, and unlocking ad campaign features.
  • Implementing manual advanced matching and why to use both auto and manual advanced matching together.

We hope this helps, and we look forward to seeing you in future sessions.

Keywords

  • TikTok Events Manager
  • Pixel Code
  • Events Builder
  • First-party cookies
  • Auto Advanced Matching
  • Pixel Helper
  • E-commerce User Journey
  • View Content
  • Add to Cart
  • Initiate Checkout
  • Complete Payment
  • Content Parameters
  • Value-based Optimization
  • Manual Advanced Matching
  • SHA-256 Encryption

FAQ

Q: What is the TikTok Pixel? A: The TikTok Pixel is a tracking code that helps you measure the effectiveness of your advertising by understanding the actions people take on your website.

Q: Why should I turn on first-party cookies? A: Keeping first-party cookies on is crucial as turning them off will impact attribution.

Q: What is the purpose of advanced matching? A: Advanced matching helps improve attribution by matching user data from your website with TikTok data, using emails and phone numbers.

Q: Should I hard code the parameters in my events? A: No, it is always recommended to use dynamic values instead of hard-coding parameters to ensure accurate data representation and tracking.

Q: What are content_id and content_type used for in TikTok Pixel? A: These parameters are used for shopping ads to represent the product SKU or item group IDS, helping in tracking and optimization.

Q: Can I use both auto and manual advanced matching simultaneously? A: Yes, combining both auto and manual advanced matching can provide the most consistent and effective results.

Q: Why are value and currency parameters important? A: These parameters help in reporting, better optimization of your ads, and tracking the return on ad spend, especially for value-based optimization campaigns.

Read More