Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(PPDSC-2135): add unified script to Consent #193

Merged
merged 15 commits into from
May 23, 2022
Merged

feat(PPDSC-2135): add unified script to Consent #193

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
108d5eb
feat(PPDSC-2135): add unified script to Consent
tbradbury May 6, 2022
8baf472
feat(PPDSC-2135): refactor to enable CCPA script
tbradbury May 9, 2022
bf87815
feat(PPDSC-2135): fix mdx error update tests
tbradbury May 9, 2022
47afca0
feat(PPDSC-2135): add unified script logic to link
tbradbury May 9, 2022
415ecbc
Merge branch 'main' into feat/PPDSC-2135-sourcepoint
tbradbury May 9, 2022
32fabef
feat(PPDSC-2135): refactor so stub logic
tbradbury May 9, 2022
add7809
Merge branch 'main' into feat/PPDSC-2135-sourcepoint
tbradbury May 10, 2022
63034b7
Merge branch 'main' into feat/PPDSC-2135-sourcepoint
tbradbury May 16, 2022
7bf3f22
Merge branch 'main' into feat/PPDSC-2135-sourcepoint
tbradbury May 16, 2022
cff314b
Merge branch 'main' into feat/PPDSC-2135-sourcepoint
tbradbury May 17, 2022
845818b
Merge branch 'main' into feat/PPDSC-2135-sourcepoint
tbradbury May 19, 2022
b6effdb
Merge branch 'main' into feat/PPDSC-2135-sourcepoint
tbradbury May 19, 2022
8f0f989
Merge branch 'main' into feat/PPDSC-2135-sourcepoint
tbradbury May 20, 2022
9a0232d
feat(PPDSC-2135): update tabToOpen type
tbradbury May 20, 2022
ba4355a
feat(PPDSC-2135): fix typos
tbradbury May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion cypress/support/commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
Cypress.Commands.add('mockConsentAndVisit', url => {
cy.intercept('GET', '**/wrapper/tcfv2/v1/gdpr/**', 'fx:consent-request');
cy.setCookie('nukt_sp_consent', 'JABCDEFGHI');
cy.setCookie('consentUUID', '0714192a-0776-4b78-b462-41dde53d35e8_7');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are those gonna change from time to time?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't believe so it what we do on Render and we have not had to change them once.

cy.visit(url);
});

Expand Down
1 change: 1 addition & 0 deletions site/components/site-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ const SiteFooter: React.FC<FooterProps> = ({cellProps = {xs: 12}}) => (
<FooterLink>
<ConsentSettingsLink
privacyManagerId="407619"
gdpr
overrides={linkOverrides}
>
Privacy policy
Expand Down
3 changes: 2 additions & 1 deletion site/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,10 @@ export default class MyDocument extends Document {
{helmet.script.toComponent()}
<HTMLMeta />
<Consent
sourcePointConfigNonTCFV1={{
sourcePointConfigUnified={{
accountId: 259,
propertyHref: 'https://newskit.co.uk',
gdpr: {},
}}
reactHelmet={Helmet}
/>
Expand Down
22 changes: 18 additions & 4 deletions site/pages/components/consent-settings-link.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,27 @@ The consent settings link supports any prop valid on the <a href='/components/li
Custom and required props are detailed below:

<LegacyBlock marginTop="sizing040">
<Prop required name="siteId" type="string">
Your Sourcepoint site id.
</Prop>
<Prop name="privacyManagerId" type="string">
<Prop required name="privacyManagerId" type="string">
Your privacy manager id.
</Prop>
<Prop name="siteId" type="string">
Your Sourcepoint site id. This is used for the legacy TCFv1 sourcepoint script.
<br/>
<br/>
The legacy TCFv2 script only needs privacy manager id.
</Prop>
<Prop name="gdpr" type="boolean">
If your using the unified sourcepoiont script for GDPR.
tbradbury marked this conversation as resolved.
Show resolved Hide resolved
</Prop>
<Prop name="ccpa" type="boolean">
If your using the unified sourcepoiont script for CCPA.
tbradbury marked this conversation as resolved.
Show resolved Hide resolved
</Prop>
<Prop name="tabToOpen" type="string">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should it be a string? What value should it take?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

If your using the unified sourcepoiont script for GDPR, you can choose the opening view of modal.
</Prop>
<Prop name="children" type="ReactNode" default="Manage Consent">
The content of the link. Can be undefined and left to default text.
</Prop>
</LegacyBlock>

[See tabToOpen options](https://docs.sourcepoint.com/hc/en-us/articles/4402697202323)
140 changes: 129 additions & 11 deletions site/pages/components/consent.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,136 @@ export default Layout;
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.
At the moment this component is supporting three versions of the Sourcepoint config. Versions GDPR TCF V2 and GDPR Non-TCF, these are both legacy implementations (SourcePoint clients implemented before May 5th, 2021 will used these and should be migrated to the Unified Script).
The most upto date version is the Unified Script.

## Prerequisites

To utilise this component you will need to have a [Sourcepoint](https://www.sourcepoint.com) account and, if required, a Sourcepoint messaging subdomain set up. For more detailed information
please see Sourcepoint [documentation TCF V2](https://documentation.sourcepoint.com/web-implementation/web-implementation/sourcepoint-gdpr-and-tcf-v2-support/) or
please see Sourcepoint [Unified Script or Web Implementation](https://docs.sourcepoint.com/hc/en-us/articles/4405412395667-CMP-web-implementation). For legacy implementations [documentation TCF V2](https://documentation.sourcepoint.com/web-implementation/web-implementation/sourcepoint-gdpr-and-tcf-v2-support/) or
[documentation Non-TCF](https://documentation.sourcepoint.com/web-implementation/web-implementation/gdpr-non-tcf-web-implementation).

## Usage

<CodeFromFile path="examples/consent.tsx" />

## Props Unified Script GDPR TCF

<LegacyBlock marginTop="sizing040">
<Prop name="sourcePointConfigUnified" required>
The config object that initialises SourcePoint. See{' '}
<a href="https://docs.sourcepoint.com/hc/en-us/articles/4405412419731">
Sourcepoint documentation
</a>{' '}
for a full reference.
<br/>
<br/>
In order to add Sourcepoint script for GDPR or CCPA you must add at least an empty gdpr or ccpa object (see below).
<Prop name="accountId" type="number" required>
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.
</Prop>
<Prop name="baseEndpoint" type="string">
A single server endpoint that serves the messaging experience.
For GDPR TCF, CCPA, GDPR Standard, and Custom Messaging, the baseEndpoint is https://cdn.privacy-mgmt.com.
</Prop>
<Prop name="isSPA" type="boolean">
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.
<br />
<b>Note:</b> <InlineCode>window._sp_.executeMessaging();</InlineCode> is
supposed to be called on each (virtual) pageload.
</Prop>
<Prop name="authId" type="number">
Allows your organization to pass a consent identifier to Sourcepoint to be used with authenticated consent
</Prop>
<Prop name="authCookie" type="string">
Allows your organization to configure a unique name for Sourcepoint's authId cookie.
</Prop>
<Prop name="campaignEnv" type="string">
When set to stage, the implementation will default to campaigns configured in your stage campaign environment.
</Prop>
<Prop name="joinHref" type="boolean">
When set to true, will ensure that all directory regular expression functionality works in conjunction with the propertyHref parameter.
<br/>
<br/>
The joinHref parameter is solely used to test your implementation across different servers while still allowing for URL RegEx matching.
<br/>
<br/>
For these reasons, Sourcepoint strongly recommends that joinHref is set to true to ensure full CMP functionality.
</Prop>
<Prop name="targetingParams" type="object">
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.
</Prop>
<Prop name="propertyHref" type="string" default="false">
Maps the implementation to a specific URL as set up in the Sourcepoint account dashboard.
</Prop>
<Prop name="propertyId" type="number">
Maps the message to a specific property (website, app, OTT) as set up in Sourcepoint account dashboard.
</Prop>
<Prop name="events" type="object">
An array of events that allow Javascript callbacks to be triggered. Please
refer to the{' '}
<a href="https://documentation.sourcepoint.com/web-implementation/web-implementation/sourcepoint-gdpr-and-tcf-v2-support/optional-callbacks-tcfv2">
Optional Callback
</a>{' '}
document to learn more about how to use events as part of your setup
configuration.
</Prop>
<Prop name="gdpr" type="object">
In order to surface a GDPR message to your clients, you will need to include the gdpr:{ } object in your client configuration script regardless of whether you configure any optional parameters.
<Prop name="consentLanguage" type="string">
Ensure that the purposes or stack names listed in a consent message remain in the same language regardless of an end-user's browser language setting.
<br/>
<br/>
Uses ISO 639-1 language codes.
</Prop>
<Prop name="groupPmId" type="number">
Allows your organization to use the privacy manager ID for the property group's privacy manager.
</Prop>
<Prop name="targetingParams" type="object">
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.
<br/>
<br/>
targetingParams set within the gdpr object will override overall targetingParams
</Prop>
</Prop>
<Prop name="ccpa" type="object">
In order to surface a CCPA message to your clients, you will need to include the ccpa:{ } object in your client configuration script regardless of whether you configure any optional parameters.
<Prop name="alwaysDisplayDNS" type="boolean">
Setting this parameter to true enables use cases where a Sourcepoint Do Not Sell (my data) notification is hardcoded.
</Prop>
<Prop name="groupPmId" type="number">
Allows your organization to use the Privacy Manager ID for the property group's Privacy Manager ID.
</Prop>
<Prop name="targetingParams" type="object">
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.
<br/>
<br/>
targetingParams set within the gdpr object will override overall targetingParams
</Prop>
</Prop>
</Prop>
<Prop name="reactHelmet" type="react-helmet Helmet Component">
By default the Consent component will inject its scripts by rendering
script tags. However, if your project is using &nbsp;
<a href="https://www.npmjs.com/package/react-helmet" target="_blank">
React Helmet
</a>
&nbsp; you can pass the Helmet component in and the scripts will render
using that component.
</Prop>
</LegacyBlock>

## Props GDPR TCF V2

<LegacyBlock marginTop="sizing040">
Expand Down Expand Up @@ -90,15 +208,6 @@ please see Sourcepoint [documentation TCF V2](https://documentation.sourcepoint.
When true (the default value), the consent component will cause prebid.js
to wait for user consent to be provided before it initialises.
</Prop>
<Prop name="reactHelmet" type="react-helmet Helmet Component">
By default the Consent component will inject its scripts by rendering
script tags. However, if your project is using &nbsp;
<a href="https://www.npmjs.com/package/react-helmet" target="_blank">
React Helmet
</a>
&nbsp; you can pass the Helmet component in and the scripts will render
using that component.
</Prop>
<Prop name="events" type="object">
An array of events that allow Javascript callbacks to be triggered. Please
refer to the{' '}
Expand All @@ -114,6 +223,15 @@ please see Sourcepoint [documentation TCF V2](https://documentation.sourcepoint.
<InlineCode>consentLanguage: "nl"</InlineCode>
</Prop>
</Prop>
<Prop name="reactHelmet" type="react-helmet Helmet Component">
By default the Consent component will inject its scripts by rendering
script tags. However, if your project is using &nbsp;
<a href="https://www.npmjs.com/package/react-helmet" target="_blank">
React Helmet
</a>
&nbsp; you can pass the Helmet component in and the scripts will render
using that component.
</Prop>
</LegacyBlock>

## Props GDPR Non-TCF
Expand Down
2 changes: 1 addition & 1 deletion site/public/static/examples/consent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Consent } from 'newskit';

<body>
<Consent sourcePointConfigTCFV2={{ accountId: 259 }} />
<Consent sourcePointConfigUnified={{accountId: 259, gdpr: {}}} />
</body>;
Loading