npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@financial-times/cmp-client

v5.7.1

Published

A client-side library to help you add a CMP (currently provided by Sourcepoint) to your application.

Downloads

2,141

Readme

CMP Client

A client-side library to help you add a CMP (currently provided by Sourcepoint) to your application.

(Source on Confluence)

CMP Client Overview

Installation

Install as a <script> tag (recommended):

<script async src="https://consent-notice.ft.com/cmp.js"></script>

Install the library from NPM:

npm install @financial-times/cmp-client

Using the script tag

The src attribute of the script tag points to an immediately invoked function expression (IIFE) that sets up the CMP client on the host page. When the CMP client is installed this way, no additional work needs to be done.

The primary benefit of using this integration method is that your users will automatically get new updates to the CMP client as soon as they are available, as opposed to requiring a version bump and application release. However, for this method to work successfully, the host page must be one of our registered properties. Please reach out to the Ads & Privacy team if you are not sure or you would like to register a property.

By default the source link integrates the latest version of the CMP client. If you would like to pin a different version, you can append a version query parameter to the source link as follows:

<script async src="https://consent-notice.ft.com/cmp.js?version=4.0.0"></script>

Using the NPM package

[!Note] We will be adding new properties (i.e. websites under FT group) and their configs as we start rolling out.

Please reach out to the Ads & Privacy team if you think your domain needs a new property config

Usage on non-FT.com properties

import {
  initSourcepointCmp,
  properties,
  interceptManageCookiesLinks,
  debug,
} from "@financial-times/cmp-client";

/**
 * Optionally enable debug mode to see CMP events in the console
 */
debug.logCmpEvents();

/**
 * Import your domain's CMP configuration from the `properties` module:
 * e.g. properties.MM_IGNITES_ASIA, properties.SP_THE_BANKER, etc.
 *
 * We will add more domains as we create new properties in Sourcepoint
 *
 * See below for the full list of initialisation options
 */
initSourcepointCmp({
  propertyConfig: properties["YOUR_PROPERTY_CONFIG_KEY"],
  useConsentStore: false, // Specialist Titles _must_ opt out of Single Consent Store
});
/**
 * Optionally enable "Manage Cookies" link util
 */
interceptManageCookiesLinks(properties["YOUR_PROPERTY_CONFIG_KEY"]);

Usage on FT.com

import {
  initSourcepointCmp,
  properties,
  interceptManageCookiesLinks,
  debug,
} from "@financial-times/cmp-client";

/**
 * Optionally enable debug mode to see CMP events in the console
 */
debug.logCmpEvents();

/**
 * We suggest using a feature flag to disable the existing cookie banner
 * and enable the new one
 */
if (flagsClient.get("adsDisableInternalCMP")) {
  initSourcepointCmp({
    propertyConfig: FT_DOTCOM_TEST,
  });
  interceptManageCookiesLinks();
}

CMP configuration options:

Available Properties (constantly being updated)

Responding to CMP events

If you need to do additional work in response to events emitted by the CMP Vendor module – e.g. initialising vendor packages that match the purposes granted by the user – you can do so via the window._sp_.addEventListener method:

window._sp_.addEventListener("onMessageReady", (messageType) => {... });
window._sp_.addEventListener("onConsentReady", (legislation, consentUUID, consentString, consentMeta) => { ... });

[!Note] The onConsentReady event is fired

  1. As soon as the CMP has finished loading and the user's consent choices are available
  2. Subsequently, whenever the user's consent choices change

See the Sourcepoint docs for a full listing of the events you can listen for and the arguments passed to the callbacks.

Debugging

You can verify that the CMP is correctly configured using the logCmpEvents method exported from the debug module:

import { debug } from "@financial-times/cmp-client";

debug.logCmpEvents();

If everything's working then you'll see the CMP Module 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. For this reason we recommend running in an incognito window during development.

[!Note] Please ensure that your app always uses the latest version of the CMP Client library.

You can check the version your live app is using by running the following in the browser console:

window.FT_CMP_CLIENT_VERSION

Development

If you have access to the source on Github you can take a look at the reference implementations in src/examples/cmp-client.

To see a demo in action in your browser, run:

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

Visit https://localhost:5173 (see setup details in src/examples/cmp-client) to interact with the banner and see how cookies are set accordingly

For resetting your consent cookies/record and other common troubleshooting issues, see the Troubleshooting Guide

Resources

For a detailed deep-dive (internal only) of how the static deployment process works, the design is documented here. If you need to be granted access, please reach out to the Ads & Privacy team.