@financial-times/sourcepoint-cmp
v1.3.0
Published
A package to help you add SourcePoint's CMP to your application.
Downloads
10
Maintainers
robgodfrey
robertboulton
seraph2000
hamza.samih
notlee
emmalewis
aendra
the-ft
rowanmanning
chee
alexwilsonKeywords
Readme
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-cmpYou 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-cmpand 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.