Skip to main content
Act-On Software

Integrating a Tag Manager and Cookie Consent Provider

These steps let you integrate Act-On’s tracking beacon with Google Tag Manager (GTM) and Cookie Consent for a holistic cookie management solution. Once complete, your visitors will see the Cookie Consent dialog and can choose whether or not the Act-On cookie is placed on their device with tracking enabled.

Notes about this guide:

  • The steps use Google Tag Manager and Cookie Consent (both free services), but work with minor changes for other tag managers and cookie consent systems
  • These steps also work to present cookie consent only, without the ability to opt in/out of tracking
  • This approach can accommodate all tags on your website (Google Analytics, Optimizely, etc.), showing one consent message that covers cookies from all vendors you leverage

Process diagram

Tag Management and Cookie Consent horizontal.png

Steps to Implement

  1. Set up Google Tag Manager (GTM)
    1. Sign up and log in
    2. Create a website container in GTM and add the container snippet to your website according to the on-screen instructions
  2. Visit CookieConsent.Insites.com and follow their download wizard
    1. Under ‘Compliance Type’ be sure to select Ask users to opt into cookies (Advanced) – a warning appears, but this will be addressed in a future step
    2. Copy the resulting code to your clipboard
  3. Back in GTM, add a new tag for Cooke Consent
    1. Click Tag > New > Custom HTML Tag 
    2. Paste in your Cookie Consent code, then delete the last 3 lines, which look like this:
       cookiesnippet.png
    3. Copy the code below at the end of your snippet
      • This code monitors the state of your visitors' opt-in/out selection and reports it to GTM
      • Note: This is a slightly altered version of code in Cookie Consent's documentation to push events to the browser’s data layer for listening
    4. Before saving, set the Trigger to All Pages to ensure your cookie consent banner is always run on all pages
      },
       onInitialise: function (status) {
       var type = this.options.type;
       var didConsent = this.hasConsented();
       if (type == 'opt-in' && didConsent) {
         // enable cookies
         dataLayer.push({'event':'this.hasConsented'});
       }
       if (type == 'opt-out' && !didConsent) {
         // disable cookies
       }
      },
      
      
      onStatusChange: function(status, chosenBefore) {
       var type = this.options.type;
       var didConsent = this.hasConsented();
       if (type == 'opt-in' && didConsent) {
         // enable cookies
          dataLayer.push({'event':'this.hasConsented'});
       }
       if (type == 'opt-out' && !didConsent) {
         // disable cookies
       }
      },
      
      
      onRevokeChoice: function() {
       var type = this.options.type;
       if (type == 'opt-in') {
         // disable cookies
       }
       if (type == 'opt-out') {
         // enable cookies
       }
      },
      })});
      </script>

      gtm1.png
  4. Create a new variable that reports the visitor's cookie consent status
    1. Click Variables on the left of GTM and create a New user-defined variable
    2. Select the type 1st Party Cookie, set the Cookie Name to cookieconsent_status, and select URI-decode cookie
    3. Name the variable cookieconsent_status cookie and click Save
      gtm2.png
  5. Create a trigger that lets GTM listen for the user's first opt-in or a change in their choice to opt-in
    1. Click Triggers on the left of GTM and create a new trigger
    2. Select the type Custom Event, event name this.hasConsented, and set the trigger to fire on Some Custom Events where Event: equals: this.hasConsented
    3. Name your trigger this.hasConsented and click Save
      gtm3.png
  6. Create a final trigger to run the Act-On tag and other cookie-dropping scripts on your website (or to keep them from running)
    1. Click Triggers on the left of GTM and create a new trigger
    2. Select the type Custom Event, event name this.hasConsented, and set the trigger to fire on Some Custom Events where cookieconsent_status cookie: equals: allow
    3. Name your trigger Cookie Consent cookie value and click Save
      gtm4.png
  7. Get the code for the Act-On beacon
    1. In Act-On, navigate to Settings > Other Settings > Beacon Settings 
    2. Ensure that Standard Mode is set – this places cookies by default, but GTM will control whether the beacon code runs
    3. Copy the Beacon script
  8. Create a tag in GTM for the Act-On beacon
    1. Click Tag > New > Custom HTML Tag and paste in your Act-On beacon code
    2. Set the trigger for Cookie Consent cookie value and click Save
      (You now have the Act-On tag set to run only when the opt-in status trigger fires)
      beacontag.png
  9. Add any additional tags in GTM using the same Cookie Consent Cookie Value trigger to make them fire only after the user has accepted the use of cookies
    • This allows you to manage your scripts and tags on your entire website without working through a web developer and updating your website directly
    • It also ensures that you get a single cookie notification/consent dialog that covers all of your cookies, which is the best experience for your visitors
  10. Preview your changes in GTM
    • In preview mode, when you can open your website the GTM configuration be applied to you only, and you will see a helpful debug window below your site
    • This is great for troubleshooting and checking your work after making changes
  11. Submit your changes in GTM – they will go live immediately
  12. If you are using Act-On landing pages, edit your Act-On page to add the GTM container and prevent default tracking
    1. Click on the Edit JavaScript option and add both the head and body portions of your GTM container code
    2. Edit the page properties and enable the Don’t Cookie Visitors option under Advanced – this disables the default tracking and placement of Act-On cookies on this page and allows the GTM container code to manage the use of cookies and tags

lpcookies1.png

lpcookies2.png

  • Was this article helpful?
Support

Have a question about this topic?

Ask the community!