If you need to add a cookie consent notice to your website (for GDPR compliance, for example), you can use Google Tag Manager to manage all cookies and build a customized banner with Cookie Consent to allow your site visitors to consent to collect marketing data.

Together, this creates 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.

Process diagram

Instructions

Set up Google Tag Manager (GTM)

1. Go to the Google Tag Manager site
2. Sign up and log in
3. Create a website container in GTM and add the container snippet to your website according to the on-screen instructions

Grab the Cookie Consent banner code

1. Visit Osano's Cookie Consent configuration wizard
2. Click Start Coding at the bottom right
   
3. Under Configure, click the Compliance Type drop-down
   
   
   Do not make any other changes to configuration settings in Osano, including Position, Layout, or Palette configurations. Act-On only supports configuring your Cookie Consent banner code as instructed here.
4. Select Ask users to opt into cookies (Advanced)
   
5. Copy the 2 pieces of code that appear on the right-hand side
   

Paste and edit your Cookie Consent banner code in GTM

1. Head back to Google Tag Manager
2. Click Tags > New > Custom HTML Tag
3. Paste both portions of your Cookie Consent code (in the order provided by Osano's website)
4. Delete the last few lines of code – remove everything between the last }, through the closing </script> tag:
   
5. Copy the below code and paste it at the end of your Custom Cookie code 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

   },
   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
   }
   },
    "type": "opt-in"
   });
   </script>

6. Before saving, set the Trigger to All Pages to ensure your cookie consent banner is always run on all pages
   

Create a new GTM variable

Next, create a new variable in GTM to report visitors' cookie consent status:

1. Click Variables on the left of GTM, then click New in User-Defined Variables
   
2. Select the type 1st Party Cookie, enter a Cookie Name of cookieconsent_status, and select URI-decode cookie
3. Name the variable cookieconsent_status cookie and click Save
   

Create an opt-in trigger in GTM

Create a trigger that lets GTM listen for a visitor's first opt-in or for a change in their opt-in choice.

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
   

Create a trigger to run the Act-On tag

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
   

Create a tag for the Act-On Beacon

Grab the Act-On Beacon code to create another GTM tag:

1. 1. In Act-On, go to Settings > Other Settings > Beacon Settings
   2. Ensure that Standard Mode is set – GTM will control whether the beacon code runs
   3. Copy the Beacon code
   4. Head to Google Tag Manager
   5. Click Tag > New > Custom HTML Tag and paste your Act-On Beacon code
   6. Set the trigger for Cookie Consent cookie value
   7. Name the Tag Act-On Beacon and click Save – you now have the Act-On tag set to run only when the opt-in status trigger fires
      

Preview and submit your changes in GTM

1. Preview your changes in GTM
   • When you open your site in preview mode, the GTM configuration will be applied to you only; you'll also see a helpful debug window below your site
   • This is great for troubleshooting and checking your work after making changes
2. Submit your changes in GTM – they will go live immediately

Next Steps

Almost there! The last step is to add the GTM code to all your Landing Pages so that these tags will actually fire. Once you've done that, default tracking and placement of Act-On cookies will be off for these pages, and GTM will manage the use of cookies and tags.