@phntms/ft-react-components

ft-react-components

A collection of React/NextJS UI and utility components for Phantom FT sites.

Introduction

Currently implemented:

• contexts/FTTracker - Provides a context and hook for easier access to the FTTracker and ReactPlayerTracking tracking functions from ft-lib.
• hooks/PermutiveEvent - A simple hook that fires a permutive page event on NextJS router updates, will likely be merged into FTTracker
• components/PermutiveSetup - Outputs the Permutive ad tracking scripts for FT partner sites.
• components/PreviewMessage - a styled component to display a preview mode indicator for sites using Directus CMS.

Installation

Install this package with npm.

npm i @phntms/ft-react-components

Usage

FTTracker

Add the provider to _app.tsx

import { FTTrackerProvider } from "@phntms/ft-react-components";
.
.
.
return (
<FTTrackerProvider>
    <PageViewData pageProps={pageProps} />
    <Component {...pageProps} />;
  </FTTrackerProvider>
)

Use the hook to pass the site's config/article data props and some tracking options

import { useFTTracker, TrackingOptions, ConfigType } from "@phntms/ft-react-components";
.
.
const { setPageViewData, setTrackingOptions } = useFTTracker();

 useEffect(() => {
    const globals = pageProps.globals;
    const article = pageProps.article;
    const category = pageProps.category;

    setTrackingOptions({
      scrollTrackerSelector: "#o_tracker_scroll",
      isCustomGTMEvent: false,
    });

      const errorValue = "404";
    if (!setPageViewData) return;
    setPageViewData({
      advertiserIndustry: (globals && globals.sitewide.industry) || errorValue,
      app:
        (article && article.content_type) ||
        (globals && globals.sitewide.homepage_label) ||
        errorValue,
      articleName:
        (article && article.title) ||
        (globals && globals.sitewide.homepage_label) ||
        errorValue,
      author:
      .
      .
      .
      } as ConfigType);
    }, [pageProps]);