How to run custom JavaScript after consent

Introduction

This article focuses on executing custom JavaScript code after obtaining user consent. We'll explore a sample script that sets a new cookie once Targeting consent has been granted. Note that API is supported only when you have the Entreprise plan of our application.

Understanding the Consent Event Listener

Our application triggers a specific event, PandectesEvent_OnConsent, when a user interacts with the consent banner. By listening to this event, you can execute custom code in response to user consent.

Sample Code: Setting a Cookie After Targeting Consent:

Here is an example of how you can set a new cookie when consent for Targeting is granted:

window.addEventListener('PandectesEvent_OnConsent', function(event) {
    if (event.detail.consentType === 'new') {
        if ((event.detail.preferences & 4) === 0) {
            // your code here
        }
    }
});

The consentType is a string value that represents the state of user consent. It can take one of the following values:

default: This is applied as the default policy when the page first loads and the user has not yet made a decision regarding their consent preferences.
new: This value indicates that new consent has been given, meaning the user has actively made a decision regarding their consent preferences.
stored: This signifies that consent was previously given by the user in a past interaction and is currently stored.
revoke: This occurs when a user actively revokes their consent on the current page.


The preferences property is integral in understanding what categories of cookies and tracking the user has consented to. It is represented as a numeric value, where each category is denoted by a specific bit in the binary representation of this number. Here's how to interpret the preferences value:

preferences === 7: This indicates that all categories are blocked. In other words, the user has denied consent for all types of cookies and tracking except the strictly necessary ones.
preferences === 0: This value means that only strictly necessary cookies are allowed. All other categories have been blocked by the user.
(preferences & 1) === 0: If this condition is true, it means that cookies and tracking for Functionality purposes are allowed.
(preferences & 2) === 0: This condition being true indicates that Performance-related cookies and tracking are permitted.
(preferences & 4) === 0: When this is true, it signifies that Targeting cookies and tracking are allowed.

Breaking Down the Code

The event listener is attached to the window object, listening for the PandectesEvent_OnConsent event. Inside the event listener, a conditional check (if (event.detail.consentType === 'new')) ensures that the code executes only when a new consent decision is made. The crucial part of this script is the conditional statement if ((event.detail.preferences & 4) === 0). This bitwise operation checks if the Targeting consent (represented by the number 4 in our system) is granted. If the condition is met, your code can run inside, which can then be used for Targeting-related data processing.

Conclusion

Custom JavaScript execution post-consent is a powerful feature that enables Shopify store owners to adapt their site's behavior based on user preferences. Through this sample script, you can ensure that certain Targeting actions, such as setting a specific cookie, are performed only after the requisite consent is obtained, thereby adhering to privacy laws and respecting user choices. Keep exploring such functionalities to enhance your store's compliance and user experience with our Pandectes GDPR Compliance.

Updated on: 20/02/2024