TikTok Pixel Tracker for React

This is a lightweight package that enables TikTok Pixel tracking on React-based websites or apps. With this package, you can easily track various user events, such as page views, clicks, purchases, and more, without having to manually add scripts to your HTML files.

Installation

To install the package, simply run the following command:

yarn add react-pixel-tiktok

Usage

To use this package, here's an example:

1import React, { FC } from "react";
2import tiktokPixelHandler from "react-pixel-tiktok";
3// or import { tiktokPixelHandler } from "react-pixel-tiktok";
4
5export const TIKTOK_PIXEL_ID = "123456789";
6
7export const MyComponent: FC = () => {
8  const handleClick = () => {
9    // creating a simple event
10    tiktokPixelHandler.setTracking({
11      tracking: "CompleteRegistration",
12      data: {
13        // just making a random number for the sake of the example, you can use userid or any other unique identifier
14        content_id: String(~~(Math.random() * 0xffffff)),
15      },
16      // if you want this tracker inside an instance you can add it here
17      // instance: "sideTwo",
18    });
19  };
20
21  useEffect(() => {
22    tiktokPixelHandler.init(TIKTOK_PIXEL_ID);
23  }, []);
24
25  return (
26    <div>
27      <h1>React tiktok pixel</h1>
28      <button onClick={() => handleClick()}>Create an event</button>
29    </div>
30  );
31};

you can also get the original pixel object:

1const ttq = tiktokPixelHandler.getTracker();

or change pixel tag if needed:

1tiktokPixelHandler.setPixelTag("ttg"); // ttq is default

For a full list of available methods and parameters, please refer to the documentation.

Contributing

If you find a bug or want to suggest an improvement, please open an issue or a pull request on GitHub. We welcome contributions from the community!

License

This package is released under the MIT License.