TCF v2 Google Tag Manager (GTM) Implementation Guide

  • Last Updated

This document is a step-by-step guide for implementing Quantcast Choice TCFv2 on a website using Google Tag Manager (GTM). This process makes use of a custom html GTM tag and additional GTM variables and triggers/trigger groups. Please note that before finalizing your GTM setup, you should complete the site and consent configurations - these steps and more are outlined in our User Guide which features detailed instructions for setting up your CMP.

Other documents in this series:

Assumptions:

  1. You have a quantcast.com account with your website added and configured under Privacy. If not, check out our User Guide.
  2. The website, where Choice will be added, has GTM installed.
  3. This guide assumes that you import the provided GTM container file into your GTM environment in order to import the custom html tag and necessary variables and example triggers. (For help on Variables, check out our Variables Guide.) It is recommended that you import & merge the provided container into your existing container, creating a new workspace in the process, see instructions below.

Things needed:

  1. Your Quantcast Universal Tag ID (Guide to finding your UTID) 
  2. GTM Container Import - Tag and Variables (Required).
  3. GTM Container Import - Non-IAB Vendor Example Triggers  (optional NON-IAB trigger examples).

Table of Contents

Add Quantcast Choice with GTM

Quantcast Choice GTM Configuration

Adding Non-IAB vendors

Triggers Non-IAB vendors allowing/blocking tags

Add Quantcast Choice with GTM (JSON Container Import):

Importing the GTM Quantcast Choice TCFv2 container is the most reliable way to add the custom html tag, all of the necessary variables, and sample triggers you can use to easily configure your container for consent management. 

Download the GTM Container Import - Tag and Variables. Store it in a local directory on your computer.

Video Walkthrough: 

1. In the Google Tag Manager user interface, click the Admin link in the top navigation.

ADMINcture1.png

2. In the Container column, click Import Container.

Import.png

3. In the view that opens, click Choose container file.

Container.png

4. In the file selector, browse to the GTM-CONTAINER_qcchoice-tcfv2-import-with-ccpa-and-data-layer-push.json file in your local directory, and select it for importing.

5. Choose to create a New workspace with the import, or to merge it into an Existing workspace. It is recommended to create a new workspace for this import.

Workspace.png

6. In the overlay that opens, give the workspace a descriptive name.

7. Click Save in the top right corner to save the new workspace.

Save.png

8. Choose Merge as the import option, and select Overwrite conflicting tags, triggers, and variables.

merge.png

9. Verify that the import options are all fine. You can click View detailed changes to see what exactly will happen when you confirm the integration.

10. Click Confirm when ready to import the container to the new workspace you created.

Import.png

You have now added all the necessary tags, triggers, and variables to get you started. You will have to configure some variables, and you will have to create new triggers to enable consent management in the container. The next chapter will explain this process in more detail.

Quantcast Choice GTM Configuration

Here are the steps you need to take to configure the Quantcast Choice tag, and to create and modify the triggers and variables you’ll need for the integration to work.

1. Set the QCChoice - UTID constant value. Browse to Variables in your container, and open up the QCChoice - UTID variable. Set the value to your UTID (pCode) (Guide to find UTID) 

mceclip0.png

2. If subdomains are not selected, this value is False by default. Otherwise, a valid domain should be entered.

mceclip1.png

Enable CCPA Support:

  • You must have CCPA enabled on the website add at quantcast.com/protect
  • You need an html container with a unique ‘id’ attribute set (likely in the footer) where the CCPA message will be appended to on the page.
  • You can learn more about the html id attribute here.
  • This html id can be anything you choose (valid html id value) as long as the container id (on the page) matches the QCChoice - CCPA msg id value in GTM. In the screenshot below the container in the footer of the website has the id of ‘choice-footer-msg’ and since we also set the value of QCChoice - CCPA msg id in GTM the CCPA footer message was appended to the container with JavaScript. You may need to have your dev team add an empty container (with a unique html id) to the footer of your website where the CCPA message can be appended.
    dev.png
  • Add the QCChoice - CCPA msg id constant value. This is the html id of the footer dom element where the CCPA message/popup link will be appended. (See the explanation above about how to find/get an HTML id attribute)
    msgid.png
  • Set the QCChoice - CCPA constant to true to enable, false to disable.
    CCPATrue.png
  • If CCPA is successfully enabled on your website you will see the CCPA msg with a link Do Not Sell My Data link in the footer (or wherever your html id div from step 2 a is located on the page)DNS.png
  • When clicking on the Do Not Sell My Data link in the CCPA footer message a modal should pop up.
    DNSMODAL.png

Push consent signals to the data layer:

Set the QCChoice - DataLayer Push constant to true to automatically push consent signals for IAB Vendors, Non IAB Vendors, Legitimate Interests, Publisher Consents.

There are 2 events that get pushed to the data layer:


  1. window.dataLayer.push({
      'event': '__cmpLoaded',
      '__cmpLoaded': true,
      'gdpr': tcData.gdprApplies, // true/false
    });
    CMPloaded.png

  2. window.dataLayer.push({
      'event': '__cmpConsents',
      '__cmpConsents': {
        'iabVendorConsentIds': iab_vendor_ids, // comma separated string “1,3,4,5…”
        'iabVendorsWithConsent': iab_vendor_names, // pipe separated string “name|another|more”
        'nonIABVendorConsentIds': non_iab_vendor_ids, // comma separated string “1,3,4,5…”
        'nonIABVendorsWithConsent': non_iab_vendor_names, // pipe separated string “name|more”
        'gdpr': tcData.gdprApplies, // true/false
        'publisherConsents': publisher_consents, // comma separated string “1,3,4,5…”
        'publisherLegitimateInterests': publisher_legitimate_interests, // comma separated string “1,3,4,5…”
        'purposeConsents': purpose_consents, // comma separated string “1,3,4,5…”
        'purposeLegitimateInterests': purpose_legitimate_interests, // comma separated string “1,3,4,5…”
      }
    });

Set the custom Choice tag to fire first

  • Navigate to the Tags page and open up the Set the tag firing priority to ‘9999’
    9999.png

 

Triggers Non-IAB Vendor Tag Blocking and Firing (Such as Hotjar, Facebook, Twitter, LinkedIn, etc)

Adding a Non IAB Vendor: 

Video Walkthrough: Adding NON-IAB vendor example to Choice 

  1. After logging into your Quantcast.com account, navigate to the Vendors tab
    vendors1.png
  2. Navigate to the Non-IAB Vendors tab
    noniab.png
  3. From the Non-IAB tab click to Add a vendor and enter the vendor details/purposes. You may want to check with your legal/privacy teams for vendor descriptions and purposes.
    noniab__1_.png

  4. Non-IAB vendors added here will automatically start showing up in the consent popup for site visitors.

Import example Non-IAB Triggers

  1. Download the example trigger container: GTM Container Import - Non-IAB Vendor Example Triggers  and save the .json file locally.
  2. Import the container using the same steps described above for “Add QCChoice with GTM (JSON Container Import)”
    • In the directions above for Add QCChoice with GTM (JSON Container Import)  it is recommended that you create a New Workspace (in step 5) however, if you are already working in a “new workspace” you can import this GTM example trigger addon container to the current workspace.
      indent.png
  3. After importing the sample addon container you should now have 4 example triggers added. 
    4trigger.png

Trigger Examples

There are three types of triggers included in the sample container file. These three types can be used to cater to the following use cases:

  1.  A trigger which fires a tag as soon as the consent window closes, and the user has granted the tag consent to fire.
  2.  A trigger which blocks a tag from firing if consent has not been granted to the tag.
  3.  A trigger group which fires the tag after consent has been granted to the tag and some other trigger has fired as well (e.g. a DOM Ready trigger). This is useful for deferring tags that fire during page load to wait for consent to be granted before allowing them to fire.

The GTM Container Import - Non-IAB Vendor Example Triggers contains the following sample triggers:

QC - Consent_NON_IAB_SAMPLE - Hotjar (by vendor name)

This example is a Custom Event trigger which fires on the __cmpConsents event. This event is dispatched to dataLayer as soon as the user’s consent choices have been registered (load of the page with existing consent and/or when the user closes the consent dialog after having modified their consent choices).

The trigger checks if the Data Layer variable named {{QC - __cmpConsents.nonIABVendorsWithConsent}} contains the string Hotjar. (This Data Layer variable was automatically created during json import with the tag and variables, more details on the variables created during import can be found here. The only way for this string to be present in the Data Layer variable is if the user has given Hotjar consent.

You can thus use this trigger to fire a Hotjar tag as soon as consent is established IF the user has given Hotjar consent.
hjar.png

QC - Consent_SAMPLE - Example with vendor ID (Hotjar)

NOTE: In the example above when we added Hotjar as a Non-IAB vendor they were given the vendor ID 3. Your vendor may differ depending on the order and number of Non-IAB vendors added to your quantcast.com account.

This example is a Custom Event trigger which fires on the __cmpConsents event. This event is dispatched to dataLayer as soon as the user’s consent choices have been registered (load of the page with existing consent and/or when the user closes the consent dialog after having modified their consent choices).

The trigger checks if the Data Layer variable named {{QC - __cmpConsents.nonIABVendorConsentIds}} matches the regular expression (^|,)3(,|$). This regular expression basically looks for the ID 3* (which is the custom NON-IAB vendor ID created in the example here) in the consent ID string. The only way for this ID to be present in the Data Layer variable is if the user has given Hotjar (ID:3) consent.

You can thus use this trigger to fire a hotjar tag as soon as consent is established IF the user has given Hotjar consent.

More details can be found here.

  • This ID will vary depending upon the order and number of Non-IAB vendors added to your quantcast.com account

hjar2.png

QC - Exception_NON_IAB_SAMPLE - Hotjar

This example is a Custom Event trigger which blocks any tag (to which it has been added as a trigger exception) from firing if the user has not given Hotjar consent.

The trigger fires on all events by using the .* regular expression match for the event name. This way it can be added to any tag, regardless of the triggers the tag has.

The blocking condition is the reverse of what the condition would be if this trigger should fire an Hotjar tag. Thus it checks that the {{QC - __cmpConsents.nonIABVendorsWithConsent}} string does not contain Hotjar, as this indicates that the user has not given consent to Hotjar to fire.

You can thus use this trigger to block any Hotjar tag from firing if appropriate consent has not been given.

hjar3.png

QC - Trigger_NON_IAB_SAMPLE - All Pages with Hotjar Consent

This example is a Trigger Group which fires the tag as soon as the All Pages trigger has fired AND the QC - Consent_SAMPLE - AppNexus trigger has fired.

The All Pages trigger fires on the page load as soon as the GTM container has loaded, and the QC - Consent_NON_IAB_SAMPLE - Hotjar (see above) trigger fires as soon as consent has been established and Hotjar has been granted consent.

The purpose of the Trigger Group is to combine two triggers so that the tag doesn’t execute until both have successfully fired. You can thus use it as a deferring mechanism, so that your tag that would normally fire on All Pages or a DOM Ready trigger, for example, now has to also wait for consent to be established.

hjar4.png

 

Additional resources around this topic:

Return to top
Was this article helpful?
0 out of 0 found this helpful

Related articles

Help