NewsKit Mobile Logo

Consent

Overview

The consent component is a non-visual component for the consent of the use of 3rd party cookies. It triggers the loading of a Sourcepoint CMP (Content Management Platform) dialog to allow the user to decide what 3rd party cookies they wish to allow or disallow on their browser. Unless you are utilising React Helmet, it must be placed inside the body of the document during server-side rendering. NewsKit has both an AMP and non-AMP version of this component. The two are not interchangeable so you must ensure you use the correct one.

At the moment this component is supporting two version of the Sourcepoint config. Versions TCFV1 and TCFV2.

Prerequisites

To utilise this component you will need to have a Sourcepoint account and, if required, a Sourcepoint messaging subdomain set up. For more information please see Sourcepoint documentation TCFV2 and documentation TCFV1 for the version 1.

Usage

Props V2

sourcePointConfigTCFV2
The config object that initialises SourcePoint. Required parameters: accountId. Optional Parameters: propertyHref, privacyManagerId, siteId, siteHref, targetingParams, waitForConsent and baseEndpoint. mmsDomain and wrapperAPIOrigin are supported but it is advised you use the baseEndpoint property instead. See Sourcepoint documentation for full description of options.
accountIdnumber
This Prop is deprecated on the component and should be set in the sourcepoint config. Your Sourcepoint account id.
mmsDomainstring = https://message{accountId}.sp-prod.net
This Prop is deprecated on the component and should be set in the sourcepoint config. Can be changed to a CNAMED subdomain in order to deliver 1st party cookies on Safari web browser (due to Safari’s ITP). Changing the mmsDomain is optional! More information about setting up an mmsDomain below.
waitForConsentboolean = false
When true (the default value), the consent component will cause prebid.js to wait for user consent to be provided before it initialises.
reactHelmetreact-helmet Helmet Component
By default the Consent component will inject its scripts by rendering script tags. However, if your project is using  React Helmet  you can pass the Helmet component in and the scripts will render using that component.

Props V1

If you want to use the TCF1 version of the consent rather than passing the SourcePoint config through sourcePointConfigTCFV2, you have to pass them through sourcePointConfig. Secondly pass the accountId as a string and rename propertyHref to siteHref if used.

<Consent
    sourcePointConfig={{
      accountId: "accountId",
      siteHref: 'http://newskit.co.uk/'
    }}
  />

How to run on localhost

The minimum parameters for the Consent component to run locally are a sourcePointConfig object with accountId and siteHref for TCFV1 and with an accountId and propertyHref for TCFV1. The siteHref or propertyHref property should be an url that that exists in your account's property group. Contact your sourcepoint account manager.

In a V2 example it would look like this:

<Consent
    sourcePointConfigTCFV2={{
      accountId: accountId,
      propertyHref: 'http://newskit.co.uk/'
    }}
  />

AMP

Usage With AMP

Note the use of the AMP Head component. The Consent component must be used as a child of Head. See Getting Started with AMP for more information. For the TCFV2 sourcePoint changes please see the documentation

Props With AMP

sourcePointConfigSourcePointConfigProps
The config that initialises sourcePoint.
postPromptUIstring = privacy-settings-prompt
This is the reference to on-page element that will display after a user has provided consent. When this element appears a user can click on it to change their consent preferences.
policyobject
An optional policy object can be added to the amp-consent element's JSON configuration object to customize consent blocking behaviors. Right now only customizing the default policy instance is supported. The "default" behavior policy applies to every component that is blocked by consent with data-block-on-consent attribute. For the structure of the policy, please visit the documentation.
consentRequiredboolean | string = remote
Whether consent is required from the user. It accepts a boolean value or 'remote', indicating if a consent is required. If not found, AMP will unblock content as consent is not required. For more information about the prop, please visitthe documentation
consentInstanceIdstring
The identifier of a consent configuration.
renderConsentButtonboolean = true
By setting this prop to false you can hide the default consent button.

For the available props see the example down below:

Consent button

By setting renderConsentButton to false the default consent button will be hidden. This component can be use intead. It gives the flexibilty to place anywhere on the page.

settingsButtonTextstring = Privacy Settings
Consent button label text
postPromptUIstring = privacy-settings-prompt
As this prop connects the consent button to the consent component, the value of this prop needs to match with the value provided in the consent component.