Set up consent with Platform Web SDK

Documentation Experience Platform Web SDK Tutorial

Last update: April 26, 2024

Topics:
Web SDK,Tags,Consent

CREATED FOR:

Beginner
Intermediate
Developer

Learn how to configure the privacy settings of the Adobe Experience Platform Web SDK tag extension. Set consent based on the visitor’s interaction with a banner from a Consent Management Platform (CMP).

NOTE

For demonstration purposes, this tutorial uses Klaro as a CMP. You are welcome to follow along using Klaro or the CMP you use with your website.

Learning objectives

At the end of this lesson, you are able to:

Load a CMP using tags
Configure privacy settings in Experience Platform Web SDK tag extension
Set consent for Experience Platform Web SDK based on the visitor’s action

Prerequisites

You should be familiar with tags and the steps to create rules, data elements, build libraries to environments, and switch tag libraries using the Experience Platform Debugger.

Before you begin configuring the privacy settings and creating the rules for setting consent, make sure you have injected your consent management platform script on the website and is working properly. A CMP can be loaded either directly in the source code with the help of site developers or loaded through tags itself. This lesson demonstrates the latter approach.

NOTE

A Consent Management Platform (or CMP) is used by organizations to legally document and manage a visitor’s consent choices before collecting, sharing, or selling visitor data from online sources such as websites and apps.
The recommended approach for injecting a CMP is directly through the source code before the tag manager script.

Configure Klaro

Before you jump into the tag configurations, learn more about the consent management platform used in this tutorial Klaro.

Visit Klaro and set up an account.
Go to Privacy Manager and create an instance according to the instructions.
Use the Integration Code to inject Klaro into your tag property (instructions are in the next exercise).
Skip the Scanning section, as it detects the tag property that is hardcoded on the Luma demo website and not the one you have built for this tutorial.
Add a service called aep web sdk and toggle on the Service Default State. When turned on, the default consent value is true, otherwise it is false. This configuration is handy when you want to decide what the default consent state (before visitor’s consent) is going to be for your web application. For example:
- For CCPA, the default consent is commonly set to true. You are going to reference this scenario as Implied opt-in throughout this tutorial
- For GDPR, the default consent is commonly set to false. You are going to reference this scenario as Implied opt-out throughout this tutorial.
NOTE
Generally, the above mentioned steps are done and taken care by the team or individual who is responsible for handling the CMP such as OneTrust or TrustArc.

Inject a CMP

WARNING

The best practice to implement a Consent Management Platform is typically to load the CMP before loading your tag manager. To facilitate this tutorial, you will load the CMP with the tag manager. This lesson is designed to show you how to use the consent features in Platform Web SDK and should not be used as a guide to correctly configure Klaro or any other CMP.

Now, once you are done with the Klaro’s configurations, Create tag rules with the following configurations:

Name: all pages - library load - Klaro
Event: Library Loaded (Page Top) with Advanced Options > Order set to 1
Action: Custom Code, Language: HTML to load the CMP script.

Inject CMP Rule

The custom code block should look similar to the below:

Inject CMP Rule

Now save and build this rule to your development library, validate the consent banner is showing up by switching the tag library from Luma site to your own. You should see a CMP banner on the website as below. And to check the current visitor’s consent permission you can use following snippet on the browser’s console.

    klaro.getManager().consents

Consent Banner

To get into the debug mode, use the following checkbox in the Adobe Experience Platform debugger.

Tag debug mode

Also, you might have to clear your cookies and local storage multiple times while going through this tutorial since the visitor’s consent value gets stored there. You can simply do that as below:

Clearing Storage

Privacy acts such as GDPR, CCPA, and others play a vital role in how you architect the consent implementation. In this lesson, you explore how a visitor might interact with the consent banner under two most prominent privacy acts.
Consent Scenarios

Scenario 1: Implied Opt-in

Implied opt-in means the business does not need to obtain the visitor’s consent (or the “opt-in”) before collecting their data, and hence all visitors to the website are treated as opted-in by default. However, the visitor can opt out by rejecting the cookies through the consent banner. This use-case is similar to CCPA.

Now you will configure and implement consent for this scenario:

In the Privacy section of the Experience Platform Web SDK tag extension, make sure the Default consent is set to In :
NOTE
For a dynamic solution, select the “Provide a data element” option and pass a data element that returns the value of
klaro.getManager().consents
This option is used if the CMP is injected in the source code before the tag embed code so that the default consent is available before Experience Platform Web SDK extension starts to load. In our example, we cannot use this option as the CMP is loaded with tags and not before tags.
Save and build this change to your tag library
Load your tag library on the Luma Demo site
Enable tags debugging while on the Luma site and reload the page. In your browser’s developer console, you should see that defaultConsent is equal to In
With this configuration, Experience Platform Web SDK extension continues to make network requests, unless a visitor decides to reject the cookies and opt-out:

If a visitor decides to opt out (reject the tracking cookies), you must change the consent to Out. Change the consent setting by following these steps:

Create a rule that triggers when the visitor clicks I decline. Name this rule as: all pages - click consent banner - set consent "out"
As the Event, use Click on Elements matching the CSS selector #klaro .cn-decline
Now, use the Experience Platform Web SDK, Set consent action type to set the consent as “out”:
Select Save to Library and Build:

Now, when a visitor opts-out, the rule configured in the above fashion would fire and sets the Web SDK consent as Out.

Validate by going to the Luma Demo site, reject cookies, and confirm that no Web SDK request fires after opting out.

Scenario 2: Implied Opt-out

Implied opt-out means that the visitors should be treated as opted-out by default and cookies should not be set. Web SDK requests should not fire unless visitors decide to manually opt in by accepting the cookies through the consent banner. You might have to deal with such a use-case in the European Union region where GDPR applies.

Here is how you can set up the configuration for an implied opt-out scenario:

In Klaro, toggle off the Service Default State in your aep web sdk service and save the updated configuration.
In Privacy section of Experience Platform Web SDK extension, set default consent to Out or Pending as required.
Save the updated configuration to your tag library and rebuild it.

With this configuration, Experience Platform Web SDK ensures that no request fires unless the consent permission changes to In. That could happen as a result of a visitor manually accepting the cookies by opting in.
In the Debugger, make sure that the Luma site is mapped to your tag property and that the tags console-logging is on.
Use your browser’s developer console to Clear site data in Application > Storage
Reload the Luma site and you should see that defaultConsent is set to Out and no Web SDK requests have been made

In case a visitor decides to opt in (accept the tracking cookies), you must change the consent and set it to In. Here is how you can do this with a rule:

Create a rule that triggers when the visitor clicks That’s ok. Name this rule as: all pages - click consent banner - set consent "in"
As the Event, use Click on Elements matching the CSS selector #klaro .cm-btn-success
Add an action using the Experience Platform Web SDK Extension, Action Type of Set consent, General consent as In.

One thing to note here is that this Set consent action is going to be the first request that goes out and establishes identity. Because of this, it may be important to sync identities on the first request itself. The identity map can be added to Set consent action by passing an identity type data element.
Select Save to Library and Build:
Save the rule to your library and rebuild it.

Once you have this rule in place, events collection should begin when a visitor opts-in.

Consent Post Visitor Optin

For more information on consent in Web SDK, see Supporting customer consent preferences.

For more information on the Set consent action, see Set consent.

Next: Set up Event Forwarding

NOTE

Thank you for investing your time in learning about Adobe Experience Platform Web SDK. If you have questions, want to share general feedback, or have suggestions on future content, please share them on this Experience League Community discussion post

recommendation-more-help