Use Cases

Use Lytics with GTM to Manage Customer Consent

The GDPR requires customer consent before you can collect or process the data of customers located inside the EU. You can use a Lytics modal to prompt the customer for consent before enabling the Lytics JavaScript Tag. This guide will assist you in adding a basic modal to your website in order to obtain customer consent.

This article covers the creation of a custom tag and trigger in Google Tag Manager (GTM) and assigning that trigger to the Lytics JavaScript Tag. The custom tag will display the consent modal to your customers. When the customer gives their consent, the custom trigger will fire enabling the Lytics JavaScript Tag for that customer. If they customer does not give consent, the Lytics JavaScript Tag will be disabled and will not collect or process customer data.

Before you begin:

You will need GTM enabled on your website and the Lytics JavaScript Tag set up in GTM.

Create a Custom Cookie Consent Tag

First, you will create a custom tag in GTM which will display a modal asking for customer consent.

  1. Sign into your Google Tag Manager Account.
  2. Select the container for your website.
  3. Click Tags.
    gdpr-gtm-dashboard-tag
  4. Click New.
  5. In the Untitled Tag box, enter "Cookie Consent Tag".
  6. Click the Tag Configuration pane. gdpr-gtm-create-tag-config
  7. In the Choose tag type menu, select Custom HTML. gdpr-gtm-choose-tag
  8. In the HTML text box, paste the following code. (You can customize the title, message, and button fields by editing the headline, msg, okMessage, and cancelMessage variables.)
<script>
(function(w, d) {
  var consentKey = "ly_hasConsent";

  // load the pathfora personalization library
  var loadPathfora = function() {
    if (typeof window.pathfora === "undefined") {
      var pfScript = d.createElement("script");
      pfScript.async = 1;
      pfScript.type = "text/javascript";
      pfScript.src = "//c.lytics.io/static/pathfora.min.js";
      pfScript.onload = initializeCookieConsentModal;
      d.getElementsByTagName("head")[0].appendChild(pfScript);
    } else {
      initializeCookieConsentModal();
    }
  };

  var checkConsent = function() {
    if (localStorage[consentKey] === "true") {
      dataLayer.push({ event: "consent" });
    } else {
      loadPathfora();
    }
  };

  var initializeCookieConsentModal = function() {
    if (w.pathfora && typeof localStorage[consentKey] === "undefined") {
      var cookieConsent = w.pathfora.Message({
        id: "cookieConsentModal",
        headline: "This website uses cookies",
        className: "cookie-consent-modal",
        msg:
          "We use cookies to improve our website experience. To find out which cookies we use please view our <a href='#'>cookie policy</a>. If you continue to use our website you must consent to us using cookies in this way.",
        layout: "modal",
        okMessage: "I Agree",
        cancelMessage: "I Decline",
        confirmAction: {
          name: "consent",
          callback: function() {
            localStorage[consentKey] = "true";
            dataLayer.push({ event: "consent" });
          }
        },
        cancelAction: {
          callback: function() {
            localStorage[consentKey] = "false";
          }
        }
      });

      w.pathfora.initializeWidgets([cookieConsent]);
    }
  };

  // check for consent
  checkConsent();
})(window, document);
</script>

gdpr-gtm-custom-html 9. Click the Triggering pane. 10. In the Choose a trigger menu, select All Pages. gdpr-gtm-triggering-pane 11. Click Save.

Create a Custom Cookie Consent Trigger

Now that you have added the custom cookie consent tag create a custom trigger that will listen for the customer's input.

  1. Click Triggers.
    gdpr-gtm-dashboard-triggers
  2. Click New.
  3. In the Untitled Trigger box, enter "Cookie Consent Trigger".
  4. Click the Trigger Configuration pane. gdpr-gtm-custom-trigger
  5. Select Custom Event from the Choose trigger type menu. gdpr-gtm-custom-trigger-type
  6. In the Event Name box, enter "consent" (case sensitive).
  7. Ensure the All Custom Events checkbox is selected. gdpr-gtm-custom-trigger-name
  8. Click Save.

Add Custom Trigger to Lytics JavaScript Tag

Next, change the firing trigger of the Lytics Javascript Tag to the custom Cookie Consent Trigger. This will ensure that the Lytics JavaScript tag is only loaded if consent has been given.

  1. Click Tags.
    gdpr-gtm-dashboard-tag-sm
  2. Select Lytics JS Tag.
  3. Click the Triggering pane.
  4. If you have any exisisting triggers, click the Remove icon to remove them. gdpr-gtm-jstag-remove
  5. Click the Triggering pane.
  6. Select Cookie Consent Trigger. gdpr-gtm-choose-trigger
  7. Click Save.

Publish Your Workspace

When you are ready to deploy the consent modal you must publish the changes to your workspace.

  1. Click Submit.
  2. In the Version Name box, enter a name.
  3. (Optional) In the Version Description box, enter a description.
  4. Click Publish.
    gdpr-gtm-submit-changes

If you do not receive any errors you will be redirected to the Versions tab. The cookie consent modal is now live on your website.
gdpr-consent-modal

Customization

The modal described in this guide is highly customizable. Lytics recommends working with your developer to modifiy the custom tag you created to filter based on location or to the look and feel of the modal. For detailed information about customizing the modal, see the Lytics PathforaJS SDK documentation.