react-reddit-pixel

React Reddit Pixel

React JS wrapper for Reddit's Pixel

Based on react-facebook-pixel by Zain Sajjad, adapted to Reddit's pixel.

Install

npm install react-reddit-pixel

or

yarn add react-reddit-pixel

How to use

import RedditPixel from "react-reddit-pixel";

const options = {
  debug: false, // set true to enable logs
};
RedditPixel.init("yourRedditAdvertiserIDGoesHere", options);

RedditPixel.pageVisit(); // For tracking page visit
RedditPixel.track(event); // For tracking standard events, see https://advertising.reddithelp.com/en/categories/managing-ads/implementing-reddit-pixel#N1
RedditPixel.track("Search");
RedditPixel.rdt(...args); // For tracking custom events, though Reddit currently doesn't list support for this in their documentation

if you're bundling in CI

  ...
  componentDidMount() {
    const RedditPixel =  require('react-reddit-pixel');
    RedditPixel.init('yourPixelIdGoesHere');
  }
  ...

otherwise CI will complain there's no window.

Standard Event Types

See the full list here: Event Types;

Event Name	Description	Code
PageVisit	Default event in the conversion pixel that will track that the user has visited one of the advertiser’s page	RedditPixel.pageVisit();
ViewContent	User view a particular content on a page	RedditPixel.track("ViewContent");
Search	User performed a search query	RedditPixel.track("Search");
AddToCart	User added a product to the shopping cart	RedditPixel.track("AddToCart");
AddToWishlist	User added a product to wishlist	RedditPixel.track("AddToWishlist");
Purchase	User completed the purchase	RedditPixel.track("Purchase");
Lead	When user submits information expressing interest in the advertised product/offer	RedditPixel.track("Lead");
SignUp	User completed registration form or sign up for a new service	RedditPixel.track("SignUp");

:warning: Note: Event names are case-sensitive! :warning:

Disable first-party cookies

  ...
  RedditPixel.disableFirstPartyCookies(); // Do this before tracking any events
  RedditPixel.pageVisit();
  ...

Dev Server

npm run start

Default dev server runs at localhost:8080 in browser. You can set IP and PORT in webpack.config.dev.js

Production Bundle

npm run bundle

Follow me on Twitter: @guamhat