TikTok Pixel Events API PWAStudio

WARNING! This extension is not a standalone extension. It is an add-on extension. Requires both original (base) extension and GraphQL (add-on) extension.

Requires Apptrian TikTok Pixel and Events API v2.5.0 or newer.

Requires Apptrian TikTok Pixel and Events API GraphQL v1.0.0 or newer.

Compatible with PWA Studio (Venia) frontend!

Provides Apptrian TikTok Pixel and Events API extension functionality to PWA Studio (Venia) storefront. Requires both the original (base) extension and the GraphQL (add-on) extension to be installed. Adds TikTok Pixel and TikTok Events API (TikTok Conversions API / TikTok Server-Side API) with Developer Mode and standard events on appropriate pages. Supports Advanced Matching and has the ability to add custom parameters. Easy to install and use.

The TikTok Pixel is a piece of JavaScript code for your website that enables you to measure, optimize and build audiences for your ad campaigns. Using the TikTok Pixel, you can leverage the actions people take on your website across devices to inform more effective Facebook advertising campaigns.

The TikTok Events API (TikTok Conversions API / TikTok Server-Side API) (for web) allows advertisers to send web events from their servers directly to TikTok. Server-side events are linked to a pixel and are processed like browser pixel events. This means that server-side events are used in measurement, reporting, and optimization in the same way as browser pixel events.

Conversion measurement lets you track actions people take after viewing your TikTok Ads across multiple devices, including mobile phones, tablets, and desktop computers. By creating a TikTok Pixel and adding it to the pages of your website where conversions happen, like the checkout page, you will see who converts as a result of your TikTok Ads. The pixel will continue to monitor the actions people take after clicking on your ad. You can see which device they saw the ad on and which device they ultimately converted on.

Compatible with PWA Studio (Venia) frontend without the need for any additional coding. It works out of the box.

Account & Pricing

To use this extension, a free TikTok for Business account is required.

NOTE: TikTok advertising service is not free; additional charges apply to users running TikTok Ad Campaigns.

Features

TikTok Pixel

• An easy way to enable or disable TikTok Pixel.
• Optimized loading of the base code.
• Advanced Matching supported.
• Works out of the box just type your TikTok Pixel ID (or comma-separated IDs for multipixel setups) in our extension config.
• Option to type page handles (full action names) where you want TikTok Pixel. Using this option TikTok Pixel can be added to any other Magento page or any other extension page (blogs, form pages, etc.).
• Option to enable or disable the TikTok Pixel base code.
• Individual options to enable or disable AddPaymentInfo, AddToCart, AddToWishlist, CompleteRegistration, Contact, CustomizeProduct, InitiateCheckout, PageView, Purchase, Search, and ViewContent events.
• Option to fire PageView event with other events: CompleteRegistration, Contact, InitiateCheckout, Purchase, Search, and ViewContent.
• Options to detect selected SKU for configurable products.

TikTok Events API (TikTok Conversions API / TikTok Server-Side API)

• An easy way to enable or disable TikTok Events API (TikTok Conversions API / TikTok Server-Side API).
• Advanced Matching supported.
• Option to type your TikTok Access Token in our extension config.
• Option to type your TikTok API Version in our extension config.
• Option to type your Test Event Code in our extension config.
• Option to log server-side fired events in the Magento log file.
• Individual options to enable or disable AddPaymentInfo, AddToCart, AddToWishlist, CompleteRegistration, Contact, CustomizeProduct, InitiateCheckout, PageView, Purchase, Search, and ViewContent events.
• Option to fire PageView event with other events: CompleteRegistration, Contact, InitiateCheckout, Purchase, Search, and ViewContent.
• Options to detect selected SKU for configurable products.

Category (Category Page)

• Option to type page handles (full action names) where you want category-related code.
• Option to type the event name you want to use for category tracking.
• Options to add custom parameters to your category-related event with parameters to attributes mapping. Example: google_product_category=google_product_category|name=name. The format is simple param1=attribute1|param2=attribute2 TikTok Pixel custom parameter and Magento category attribute are connected by = sign and pairs are separated by | sign.

Contact (Contact Page)

• Option to type page handles (full action names) where you want contact-related code.
• Option to type the event name you want to use for contact tracking.
• Option to type the contact form submit button selector.

Product (Product Page - AddToCart, AddToWishlist, ViewContent Events)

• Option to type page handles (full action names) where you want product-related code.
• Option to select SKU you want to use for bundle products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option for content_type to use product_group instead of product for bundle products.
• Option to select SKU you want to use for configurable products. Options: Product SKU as (id), Child SKU as (id), Child SKU as (id) and Product SKU as (item_group_id)
• Option for content_type to use product_group instead of product for configurable products.
• Option to select SKU you want to use for downloadable products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for grouped products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option for content_type to use product_group instead of product for grouped products.
• Option to select SKU you want to use for simple products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for virtual products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Options to add custom parameters to your product-related events with parameters to attributes mapping. Example: google_product_category=google_product_category|color=color. The format is simple param1=attribute1|param2=attribute2 TikTok Pixel custom parameter and Magento product attribute are connected by = sign and pairs are separated by | sign.

Quote (Checkout Page - InitiateCheckout, AddPaymentInfo Events)

• Option to type page handles (full action names) where you want quote-related code.
• Option to select SKU you want to use for bundle products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for configurable products. Options: Product SKU as (id), Child SKU as (id), Child SKU as (id) and Product SKU as (item_group_id)
• Option to select SKU you want to use for downloadable products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for grouped products. Options: Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for simple products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for virtual products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to type parameter name if you want to use Magento quote ID.
• Options to add custom parameters to your quote-related event with parameters to attributes mapping. Example: google_product_category=google_product_category|color=color. The format is simple param1=attribute1|param2=attribute2 TikTok Pixel custom parameter and Magento product attribute are connected by = sign and pairs are separated by | sign.
• Option to type the AddPaymentInfo button selector.
• Option to type the AddPaymentInfo URL hash string.

Order (Checkout Success Page - Purchase Event)

• Option to type page handles (full action names) where you want order-related code.
• Option to select SKU you want to use for bundle products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for configurable products. Options: Product SKU as (id), Child SKU as (id), Child SKU as (id) and Product SKU as (item_group_id)
• Option to select SKU you want to use for downloadable products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for grouped products. Options: Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for simple products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for virtual products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to type parameter name if you want to use Magento order ID.
• Option to type parameter name if you want to use Magento order increment ID.
• Option to type parameter name if you want to use Magento quote ID.
• Options to add custom parameters to your order-related event with parameters to attributes mapping. Example: google_product_category=google_product_category|color=color. The format is simple param1=attribute1|param2=attribute2 TikTok Pixel custom parameter and Magento product attribute are connected by = sign and pairs are separated by | sign.

Search (Search Result Page - Search Event)

• Option to type page handles (full action names) where you want search-related code.
• Option to type the event name you want to use for search tracking.
• Option to type the parameter name you want to use for search tracking.
• Option to type request parameters you want to include for search tracking.

Miscellaneous

• Option to select TikTok product identifier. Magento product SKU (Recommended) or Magento product ID.
• Option for Advanced Matching data mapping. Example: external_id=external_id|email=em|phone_number=ph. The format is simple param1=key1|param2=key2 TikTok parameter and data key are connected by = sign and pairs are separated by | sign. Available customer data keys are: em, ph, fn, ln, ge, db, ct, st, zp, country, external_id.
• Option to enable or disable Limited Data Use (LDU).
• Options to connect default Magento "Cookie Restriction Mode" cookie or any third-party cookie consent extension or theme customization via following options: Enable Cookie Consent, Consent Cookie Name, Consent Cookie Key, Consent Cookie Value, and Consent Button.

FAQ

Q: Does the extension work with multi-store setups?

A: Yes, it does work with multi-store setups. It functions in the same way as the core Magento modules, and it is fully automated.

Q: Why is the TikTok Pixel Helper extension for Chrome reporting PageView event fired multiple times?

A: The TikTok Pixel Helper extension for Chrome does not work well with PWA/SPA applications. In PWA/SPA applications, there is no reload of the web page when navigating from one page to another. As a result, the TikTok Pixel Helper extension for Chrome occasionally fails to remove previously fired events and retains them in its panel. This is a deficiency of the TikTok Pixel Helper extension for Chrome, not with our implementation of TikTok Pixel.