How to Set Up TrueVault with Elevar's Google Consent Mode Integration

Overview

With TrueVault you will work with a Customer Success Manager to map vendor disclosures, document marketing practices, and build policy assets tailored to a company’s specific operations.

For GDPR compliance, TrueVault also offers cookie scanning and categorization. To ensure ongoing compliance, TrueVault provides streamlined workflows for processing consumer data privacy requests, customizable Privacy Centers to host policies and request forms, and tools for managing additional requirements like Data Protection Assessments. They currently support major privacy laws, including CCPA/CPRA, GDPR, CPA, CDPA, VCDPA, and UCPA.

Prerequisites:

  • Ensure that you have enabled Consent Mode in your Shopify Store. Follow this guide to learn how!

❗️

Installation: Live Consent Banner

If you do not have a live consent banner on your website yet, ensure that you reach out to TrueVault via email at sales@truevault.com to set this up.

  • Be sure to include the following:
    • Subject: Current Elevar User
    • Name
    • Email
    • Title
    • Company

Add TrueVault CMP JavaScript

  • Add the following JavaScript snippet to the of the Shopify theme. Ensure that you replace the <your unique ID> with your account-specific ID!
<!-- Start of TrueVault Polaris Code Block -->
<script src="https://polaris.truevaultcdn.com/static/pc/<your unique ID>/polaris.js"></script>
<!-- End of TrueVault Polaris Code Block -->

How to Implement the TrueVault Tag Template in Google Tag Manager

Locate TrueVault Template:

  • Begin on your Google Tag Manager homepage and use the left-hand navigation menu to click on the "Templates" tab.
  • Once you have accessed the Templates page, locate and click on the "Search Gallery" button.
    • (See Figure 1)

Step 1 screenshot

_Figure 1_

Add TrueVault to Workspace:

  • An additional window will appear titled "Import Tag Template".
    • Click on the Search function located in the upper right-hand corner of the window and locate the "TrueVault Polaris CMP" template.
    • Once you have located the TrueVault template, click on the "Add to workspace" button located in the upper right-hand corner of the window.
      • (See Figure 2)

Step 1 screenshot

_Figure 2_

Confirm Template:

  • An additional confirmation pop-up window will appear titled "Are you sure you want to add a community template".
    • After reading the information regarding adding a community template, click on the "Add" button located in the lower right-hand corner of the widow.
      • (See Figure 3)

Step 2 screenshot

_Figure 3_

Create TrueVault Tag in Google Tag Manager

Add New Tag:

  • Begin on your Google Tag Manager homepage and use the left-hand navigation menu to click on the "Tags" tab.
  • Once you have accessed the Tags page, locate and click on the "New" button.
    • (See Figure 4)

Step 5 screenshot

_Figure 4_

Select Tag Type:

  • An additional window will appear, locate and click on the "Tag Configuration" box.
  • An additional window will appear titled "Choose tag type".
    • Navigate to the section of the window titled "Custom". Locate and click on the "TrueVault Polaris CMP" tag type.
      • (See Figure 5)

Step 1 screenshot

_Figure 5_

Configure Trigger:

  • Once you have configured the TrueVault Tag, you will need to configure the triggering. Locate and click on the "Triggering" box.
  • An additional window will appear titled "Choose a trigger". Use the search function located in the upper right-hand corner of the window to locate and click on the the "Consent Initialization - All Pages" tab.
    • (See Figure 7)

Step 3 screenshot

_Figure 7_

Save Tag:

  • Once you have entered the required information for configuring the tag and trigger, you will need to name the tag and save the changes.
    • Navigate to the upper left-hand corner of the page and use the text box to title the tag (e.g., TrueVault Tag).
    • Navigate to the upper right-hand corner of the page and click on the "Save" button.
      • (See Figure 8)

Step 4 screenshot

_Figure 8_

Add the Custom Pixel

To ensure TrueVault works correctly, Elevar needs to read the polaris_consent_settings cookie and push the consent values to the data layer manually on checkout pages.

Access Shopify Settings:

  • Login to your Shopify account and navigate to the homepage.
  • Use the left-hand navigation menu to locate and click on the "Settings" tab.
    • (See Figure 9)

Step 1 screenshot

_Figure 9 _

Access Elevar Custom Pixel:

  • Once you have access your Shopify settings, use the left-hand navigation menu to locate and click on the "Customer events" tab.
  • Navigate to the list of customer events and click on the "Elevar Custom Pixel" tab.
    • (See Figure 10)

Step 2 screenshot

_Figure 10_

Add Script:

❗️

Important: Default Consent Information

Update the fallback variable defaultConsent with either granted or denied. This variable determines the default state when the cookie is missing.

  • Once you have accessed the Elevar Custom Pixel, add the following script under the Elevar Checkout Tracking custom pixel:
//TrueVault mapping for checkout pages
analytics.subscribe("page_viewed", async (event) => {
 if (!event.context.window.location.pathname.includes("checkouts")) {
   return;
 }

 //Modify the defaultConsent based on store region
 let defaultConsent = "granted";

 function getCookie(name) {
   let match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
   if (match) return decodeURIComponent(match[2]);
   return null;
 }

 let consentCookie = getCookie("polaris_consent_settings");
 if (!consentCookie) {
   console.error("No polaris_consent_settings cookie found, applying default consent.");
   return;
 }

 try {
   let consentData = JSON.parse(consentCookie);

   //Check if required properties exist in the parsed cookie
   if (!consentData || typeof consentData !== "object") {
     console.error("Invalid or empty data in polaris_consent_settings cookie, applying default consent.");
     return;
   }

   const mapConsentStatus = function (status) {
     return status === true ? "granted" : "denied";
   };

   window.dataLayer = window.dataLayer || [];
   if (typeof gtag !== "function") {
     window.gtag = function () {
       window.dataLayer.push(arguments);
     };
   }

   gtag("consent", "update", {
     "analytics_storage": mapConsentStatus(consentData.analyticsPermitted),
     "ad_storage": mapConsentStatus(consentData.adsPermitted),
     "ad_user_data": mapConsentStatus(consentData.adsPermitted),
     "ad_personalization": mapConsentStatus(consentData.adsPermitted),
     "personalization_storage": mapConsentStatus(consentData.personalizationPermitted),
     "functionality_storage": mapConsentStatus(consentData.essentialPermitted),
     "security_storage": mapConsentStatus(consentData.essentialPermitted),
   });
 } catch (error) {
   console.error("Error parsing polaris_consent_settings cookie:", error);
 }
});
  • Once you have added the required script, be sure to save the changes!
    • (See Figure 11)

Step 3 screenshot

_Figure 11_