Web Implementation

Suggest Edits

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.

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.

2676

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:

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".

semaphore.push(['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]);

Updated 3 months ago