This article provides instructions on capturing consent events for users on your website using custom JavaScript code. This code can be added directly to your website or via our Custom Script option. To learn more about Consent Events defined by Consent Types or Custom Scripts, refer to these articles:

• Article: Consent Types Overview
• Article: Managing Custom Scripts

Capturing Consent Events Based on User Actions

The code examples below can be used to add your own custom code to capture new Consent Events when your users perform certain actions. Options include:

• On-click: Agreements accepted after a user clicks on something as part of acceptance flow (buttons, links, form submits, etc.). This is the most common way that consent is captured.
• Viewed: Agreements accepted when a user views a certain page. This is less common.

Note that Concord automatically captures Implied Consent Events for your website Privacy Policy on each of your projects. This Consent Type is automatically generated when configuring your first project. More details on standard privacy policy events or adding additional Implied Consent Events for disclosure based consent can be found here:

• Article: Adding Consent Types

When using the example code below, please make sure to do end-to-end testing to make sure that the code is working as expected and that your Consent Events are being captured correctly.

Capturing On-click Consent Events

Custom Script example for when a user clicks a button on your website:

(function() {
    window.addEventListener('concord-ready', function() {
      console.log('ready');
        const button = document.getElementById('(elementId)');
        if (!button) {
          console.log('button not found!');
          return;
        }
        button.onclick = function (evt) {
            window.concord.consent.addConsentEvent({ 
		        category: '(category)', 
		        subcategory: '(subcategory)', 
		        label: '(label)', 
		        consentState: 'accepted', 
		        consentAction: 'user_click'}             
           );
           return false;
        };
    });
}());

‍

IMPORTANT: Replace (elementId) with the id of the button and (category), (subcategory), (label), (consentState) with the values that match your defined Consent Type.

For example, the Consent Type in the image below would contain the following:

• category: 'disclosure'
• subcategory: 'terms_of_service'
• label: 'example_terms_of_service'
• consentState: 'accepted' : 'declined'

Also replace the (elementId) with the name of your HTML element that represents the clicked button.

‍

‍

Form Submit Example

The following Custom Script example outlines capturing consent when a user submits a basic form on your website. In this example, we’re gathering on-click consent for collecting first name, last name, and email from a form that might look like this:

‍

‍

What that Consent Type definition would look like:

‍

What that Custom Script would be:

(function() { 
 const email = document.getElementById('email');
 const firstname = document.getElementById('first-name');
 const lastname = document.getElementById('last-name');
  
    window.addEventListener('concord-ready', function() {
      console.log('formsubmit ready');
        /**identifying the form submit button**/
        const button = document.getElementById('submit');
        if (!button) {
          console.log('button not found!');
          return;
        }
        button.onclick = function (evt) {
            window.concord.consent.addConsentEvent({ 
                /**attributes matched to the consent type definition**/
		        category: 'custom', 
		        subcategory: 'custom_name_and_email', 
		        label: 'example_form_submit', 
		        consentState: 'accepted', 
		        consentAction: 'user_click'}             
           );
            window.concord.profile.update({
        	email: email.value,
            firstName: firstname.value,
            lastName: lastname.value,
      	  });
        };
    });
}());

‍

Capturing Viewed Consent Events

Custom Script example for when a user views a certain page on your website:

(function() {
    window.addEventListener('concord-ready', function() {
        console.log('ready');
        /**replace this with page url where you want consent to send**/
        const allowedpage = '/cookiepolicy.html';
        function CompareCurrentPage(pageurl){
          if (window.location.href.indexOf(pageurl) > -1){
            return true;
          } 
          return false;
        }
        if (CompareCurrentPage(allowedpage)) {
                /**this example consent event captures that the user has cookie policy page**/
                console.log('current page is cookie policy... sending viewed consent');              
                window.concord.consent.addConsentEvent({ 
                    category: '(category)', 
                    subcategory: '(subcategory)', 
                    label: '(label)', 
                    consentState: 'viewed', 
                    consentAction: 'user_click'}             
                );
            return;
        }
    });
}());

‍

IMPORTANT: Replace '/cookiepolicy.html' with the page you would like to conditionally trigger on and replace (category), (subcategory), (label) with the values that match your defined Consent Type.

For example, the Consent Type in the image below would contain the following:

• category: 'disclosure'
• subcategory: 'custom_cookie_policy'
• label: 'example_cookie_policy'

Note that any custom field within a Consent Type (in this case, subcategory) must be prepended with 'custom_'.

‍

‍