Web Implementation

The Ketch Smart Tag is the mechanism used to manage and collect a visitor's consent preferences for an organization. The below steps will guide you through deploying the Ketch Smart Tag on your site to start collecting consent.

Consent Collection and Maintenance Options

Ketch has 3 options available to customers for consent collection and maintenance: traditional, hybrid, and headless.

Traditional

In the traditional option, the out of the box (OOB) experiences are used to prompt for consent collection, consent maintenance, and data subject rights (DSR) requests.

Deploying this model involves placing the Ketch Smart Tag on all pages of the website and configuring the Ketch Platform.

Based on the configuration set within the Ketch Platform for your organization, the Ketch Smart Tag will determine the users location and obtain the corresponding configuration for the users current jurisdiction and regulations/rights they are afforded. In addition, the Ketch Smart Tag will collect the identities configured for the user, run client-side plugins for GPC, TCF, and US Privacy, if configured, and connect with any client-side 3rd parties or tag managers configured.

Hybrid

With the hybrid option, the Ketch Smart Tag is still deployed to all pages of the website, but instead of using the OOB experiences provided by Ketch, custom developed experiences can be displayed to the user.

The Ketch Smart Tag will still collect identities configured within the platform, run client-side plugins for GPC, TCF, and US Privacy, if configured, and connect with any client-side 3rd parties or tag managers configured.

The Ketch Smart Tag will emit events letting the JS on the page know when and what type of experience to display (banner, modal, preference), as well as the purpose and rights available to the user for the jurisdiction in which they are found.

Headless

Unlike the traditional and hybrid deployment options, the headless approach does not involve the Ketch Smart Tag or all the benefits described in those sections, but rather the Ketch APIs for obtaining the correct configuration for the user, getting the users current consent choices, as well as setting consent for the current user within the Ketch Platform.

In the headless approach, custom code will need to be written to

• call the APIs to get the configuration for the uses current location,
• create the various experiences for co consent collection and maintenance, as well as taking in data subject rights requests,
• determine whether or not a consent experience should be shown,
• handle checking for global privacy control (GPC) signals, generating TCF and US Privacy strings
• call APIs to get and set the users consent choices, or submit a data subject rights request

Tag Deployment

Navigate to the web Property in the admin UI. Click Export Code, copy the javascript code displayed and paste it in your site.

To ensure compliance with all regulations, we recommend implementing this script as high in the global head of the page as possible, ensuring it is present on every page of your site.

❗️

Tag Manager Implementation

While the Ketch javascript can be implemented via a tag manager, we do not recommend this as it may introduce latency into the rendering of experiences, and the orchestration of other tags on the page.

Identity Configuration

Because Ketch helps ensure consumer's data privacy choices are accurately enforced within data management systems, identity management is an important topic. Once you have decided what identity spaces should be passed to Ketch and created them within the product, you can leverage one of the following methods to pass them to Ketch:

Data Layer

We strongly recommend that any identity you want to pass to Ketch, that you do so through a data layer.

A data layer is an object that contains all of the information that you want to pass to a Tag Management System, or any external party that is on your website. For more information on data layers and how to set one up, please reference the following documentation:

• Google Data Layer Overview
• Data Layer Dev Documentation

Once you have made the identity a variable on page, make sure to update the configuration in the Property.

Page Attribute

If you have chosen not to implement a data layer, you can still insert the identity into the page as a variable. Once you have made the identity a variable on page, make sure to update the configuration in the Property.

Cookie

If you do not want to pass the identity into a variable on the page to be picked up, simply indicate the location "Cookie" in the data layer configuration of the Property. Provided the cookie is a first party cookie (set by the same domain of the application), Ketch will be able to pick it up and use it.

🚧

No First Party Cookie

If you are early in the development of your consumer identity management strategy and have not yet implemented a cookie on your site, Ketch will set and maintain a first party cookie space on your behalf.

Jurisdiction Configuration

If you have chosen to pass Jurisdiction data to Ketch, you must do so through the data layer. Jurisdiction variables are expected to contain the code of the Jurisdiction.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({customJurisdiction: "us_california"}); 

// customJurisdiction: variable name. 
// us_california: the system generated code for the jurisdiction you want

Footer Configuration

If you are leveraging the Experience Server, while the Consent & Disclosure Experiences are displayed automatically, you will need to call a Ketch function when you want to show the Preference Management Experience. Frequently, this is attached to a link in the footer for "privacy preferences", "my privacy settings", or "privacy details".

ketch('showPreferences');

Standalone Ketch Preference Management Experience

Traditionally, the Ketch Preference Management experience is shown over the users current page, but if desired, the experience can be shown on a separate page. A sample page of how to show the Ketch Preference Management Experience on page load is below.

<html>
  <head>
    <!-- Load Ketch Smart Tag -->
    <!-- Replace org_code and property_code -->
    <script>!function(){var e=new URLSearchParams(document.location.search),a=e.has("property")?e.get("property"):"property_code",o=document.createElement("script");o.type="text/javascript",o.src="https://global.ketchcdn.com/web/v2/config/org_code/".concat(a,"/boot.js"),o.defer=o.async=!0,document.getElementsByTagName("head")[0].appendChild(o),window.semaphore=window.semaphore||[]}();</script>
    <script>
      window.semaphore=window.semaphore||[];
      window.semaphore.push(['showPreferences']);
    </script>
  </head>
  <body>
  </body>
</html>

In addition, you will want to attach a callback function to the hideExperience' event to redirect the user to a relevant page once the user exits the Ketch Preference Center. Below is an example of how this can be accomplished.

function experienceClosed(reason){
    if (reason != 'willNotShow') {
      if (document.referrer) {
        window.location.assign(document.referrer);
      } else {
        window.location.assign('https://example.com');
    }
  }
}

semaphore.push(['onHideExperience', experienceClosed]);