@financial-times/sourcepoint-cmp NPM

SourcePoint CMP

A package to help you add SourcePoint's CMP to your application.

Installation

Install the package from npm:

npm install @financial-times/sourcepoint-cmp

You then have two options for adding the CMP to your application:

Server-side rendering using JSX
Client-side invocation

Both patterns have reference implementations that you can look at in src/examples/sourcepoint-cmp.

To see them in action run

npm run dev -w src/examples/sourcepoint-cmp

and visit http://localhost:5137 to see each in action: interact with the banner and watch the console output to see your consent choices logged there.

Usage

Rendering with JSX

Import the CMP components and render them in your application's JSX:

import React from "react";
import { CmpScripts } from "@financial-times/sourcepoint-cmp/ssr";

// Import your domain's CMP configuration from the `properties` module.
import { ft } from "@financial-times/sourcepoint-cmp/properties";

export const App = () => (
  <html>
    <head>
      <CmpScripts config={ft}></CmpScripts>;
    </head>
    <body />
  </html>
);

Dynamic insertion

An alternative client-side mechanism is available.

The getCmpScripts method returns a DocumentFragment containing block of scripts that you can to your page's <head> element.

import { getCmpScripts } from "@financial-times/sourcepoint-cmp/client";
import { ft } from "@financial-times/sourcepoint-cmp/properties";

const cmpScripts = getCmpScripts(ft);
document.head.appendChild(cmpScripts);

Debugging

You can verify that the CMP is correctly configured by adding an events map to your configuration: the debug module used in the examples provides a sample implementation:

import { getCmpScripts } from "@financial-times/sourcepoint-cmp/client";
import { ft } from "@financial-times/sourcepoint-cmp/properties";
import { events } from "@financial-times/sourcepoint-cmp/debug";

// Merge the events map into the domain configuration
const config = { ...ft, events };
document.head.appendChild(getCmpScripts(config));

If everything's working then when running the demo app you'll see the CMP log its lifecycle events to the console, even if its UI isn't displayed.

This can easily happen when you've made a previous consent choice and the CMP is now picking it up from local storage. We recommend running in an incognito window during development.

react react-dom

@everything-registry/sub-chunk-323

1.3.0

7 months ago