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 GDPR TCF V2 and GDPR Non-TCF.

Prerequisites

To utilise this component you will need to have a Sourcepoint account and, if required, a Sourcepoint messaging subdomain set up. For more detailed information please see Sourcepoint documentation TCF V2 or documentation Non-TCF.

Usage

Props GDPR TCF V2

sourcePointConfigTCFV2

The config object that initialises SourcePoint. See Sourcepoint documentation for a full reference.

accountIdnumber

The accountId value associates the property with your organization's Sourcepoint account. Your organization's accountId can be retrieved by contacting your Sourcepoint Account Manager or via the My Account page in your Sourcepoint account.

targetingParamsobject

Targeting params allow a developer to set arbitrary key/value pairs. These key/value pairs are sent to Sourcepoint servers where they can be used to take a decision within the scenario builder.

isSPAboolean

When set to true, will confirm the implementation for a single page application and will show a message only when window._sp_.executeMessaging();is triggered.
Note: window._sp_.executeMessaging(); is supposed to be called on each (virtual) pageload.

mmsDomainstring

has been replaced by the new baseEndpoint parameter for optimization reasons. This change is completely backwards compatible. However, it is recommended that older implementations move to the new parameter to benefit from the optimizations.

wrapperAPIOriginstring

propertyHrefboolean

Maps the implementation to a specific URL as set up in the Sourcepoint account dashboard.

baseEndpointstring

is a single server endpoint from where the messaging as well as the GDPR and TCFv2 experience is served. The baseEndpoint can also be changed to a CNAMED 1st party subdomain in order to persist 1st party cookies on Safari web browser (due to Safari’s ITP) by setting cookies through the server with "set-cookie" rather than using "document.cookie" on the page. Changing the baseEndpoint domain is optional but recommended!

groupPmIdnumber

Allows your organization to use the Privacy Manager ID for the property group use of a property group's Privacy Manager ID.
Note: Call window._sp_.loadPrivacyManagerModal() without passing a parameter and the Privacy Manager that displays will be that property's version of the groupPmId Privacy Manager.

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.

eventsobject

An array of events that allow Javascript callbacks to be triggered. Please refer to the Optional Callback document to learn more about how to use events as part of your setup configuration.

consentLanguagestring

If this parameter is not present, stacks and purposes will appear according to the end-user's preferred browser language setting.consentLanguage: "nl"

Props GDPR Non-TCF

SourcePointConfigNonTCFV1

The config object that initialises SourcePoint. See Sourcepoint documentation for a full reference.

accountIdnumber

baseEndpointstring

The baseEndpoint can also be changed to a CNAME first-party subdomain in order to persist first-party cookies on Safari web browser (due to Safari’s ITP) by setting cookies through the server with set-cookie rather than using document.cookie on the page.

isSPAboolean

groupPmIdnumber

propertyHrefstring

Maps the implementation to a specific URL as set up in the Sourcepoint account dashboard.

propertyIdstring

Maps the message to a specific property (website, app, OTT) as set up in the Sourcepoint account dashboard.

targetingParamsobject

Targeting params allow a developer to set arbitrary key/value pairs. These key/value pairs are sent to Sourcepoint servers where they can be used to take a decision within the scenario builder.

eventsobject

Click here for all optional event callbacks that are supported by Sourcepoint for GDPR non-TCF web implementations.

consentLanguagestring

If this parameter is not present, stacks and purposes will appear according to the end-user's preferred browser language setting.consentLanguage: "nl"

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.