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/opt-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

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.osano.com and follow their download wizard
   1. Click 'Start Coding'
   2. 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
   3. Copy both sections of the resulting code and save them for use later
      
3. Back in GTM, add a new tag for Cooke Consent
   1. Click Tags > New > Custom HTML Tag
   2. Paste in both portions of your Cookie Consent code (in the order provided from Osano's website), then delete the last few lines. You need to remove everything between the last single curly bracket '},' through the '</script>' closing tag. It should look like this:
      
   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
      }
      },
       "type": "opt-in"
      });
      </script>

      
4. Create a new variable that reports the visitor's 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
      
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
      
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
      
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 – 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
   3. 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)
      
9. If you have additional website code that needs to obey users' cookie preference (eg., an on-page chat tool), add that code in new GTM tags using the same Cookie Consent Cookie Value trigger - they will then 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

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.