Skip to main content

Integrate Audience Unlocker with Google Tag Manager

Updated

This guide will show you how to implement an Audience Unlocker in Google Tag Manager (GTM) using two approaches:

  1. using the Data Layer to pass values such as email and consent
  2. directly accessing form fields using JavaScript

By the end of this guide, you’ll understand how to integrate both approaches to handle different scenarios when managing consent and email submissions through GTM.

 

Step 1: Setting up Google Tag Manager on your website

Before using Google Tag Manager (GTM), ensure it’s installed on your website. If you haven’t done this yet, follow these steps:

  1. Create a Google Tag Manager account at GTM’s official site.
  2. Create a GTM container for your website.
  3. After creating the container, GTM will provide you with two code snippets.
    • Place the first script in the <head> section of your HTML document.
    • Place the second script immediately after the opening <body> tag.

Here’s an example of how to install GTM on your page:

<head>
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '<https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);>
  })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
  <!-- End Google Tag Manager -->
</head>

<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="<https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX>" 
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
</body>
  • Replace GTM-XXXXXX with your GTM container ID, which you received when creating the container.

Approach A: Using the Data Layer to pass values

The Data Layer provides a more structured and robust way of handling data flow between your website and GTM. In this approach, we’ll push email and consent values to the Data Layer, and GTM will retrieve them for further processing.

Step 2a: Pushing values to the Data Layer

You need to modify your HTML form to push the email address and consent values to the Data Layer upon form submission. This will ensure that GTM can access these values.

Here’s how to modify your form to push the values to the Data Layer:

<form id="consent-form" onsubmit="pushDataToLayer(event)">
  <label for="user-email">Enter your email:</label>
  <input type="email" id="user-email" name="email" required>
  
  <label for="user-consent">
  <input type="checkbox" id="user-consent" name="consent" required>
    I agree to the processing of my data
  </label>
  
  <button type="submit">Submit</button>
</form>
<script>
  function pushDataToLayer(event) {
    event.preventDefault(); // Prevents the form from submitting immediately

    var userEmail = document.querySelector('#user-email').value;
    var consentGiven = document.querySelector('#user-consent').checked;

    // Push values to the dataLayer
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'formSubmit',
      userEmailId: userEmail,
      userConsentId: consentGiven
    });

    // Submit the form after pushing to dataLayer
    document.getElementById('consent-form').submit();
  }
</script>

Explanation:

  • Data Layer push: When the form is submitted, the pushDataToLayer function captures the email and consent values and pushes them to the dataLayer using the dataLayer.push() method.
  • event.preventDefault(): This ensures that the form doesn't submit before the data is pushed to the dataLayer.
  • Form submission: You can disable the form submission after pushing to the dataLayer by commenting out form.submit().

 

Step 3a: Creating a custom HTML tag for form data submission

Next, let’s create a tag that will submit data to Preference Manager’s DB adding a condition to have the consent checkbox as checked.

  1. Open your Google Tag Manager account and navigate to the container for your website.
  2. In the left menu, select Tags.
  3. Click New to create a new tag.
    New tag
  4. Under Tag Configuration, select Custom HTML and insert the following code: 
    <script>
  fetch(
    "https://preference-api.preference-management.usercentrics.eu/public/loyal/preferences",
    {
      headers: {
        "x-api-key": "{{apiKey}}",
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
      body: JSON.stringify({
        pacId: "{{pacId}}",
        widgetId: "{{widgetId}}",
        userId: "{{userConsentId}}",
        answers: ["{{optionId}}"],
      }),
    }
  );
</script>

     

    New Custom HTML tag
    Creating a new Custom HTML tag

Step 4a: Setting up the Trigger

To make the tag fire only when the form is submitted and consent is given, follow these steps:

  1. In the Triggering section, create a new trigger.
  2. Choose Custom Event as the trigger type.
  3. Set the event name to formSubmit (the event name we used in the dataLayer.push() in the form code).
  4. Set conditions if necessary (e.g., check that the Data Layer contains the consent signal userConsentId as true).
  5. Save the trigger.

    Adding a trigger

 

Step 5a: Creating variables in GTM

Create the following variables in Google Tag Manager so they can be dynamically inserted into the code:

  1. userEmailId:
    • Type: Data Layer Variable
    • Set the Variable Name to userEmailId.
  2. userConsentId:
    • Type: Data Layer Variable
    • Set the Variable Name to userConsentId.

Create dataLayer variable

The next variables to be set as a constants, since they will be re-used with every submission:

  1. apiKey:
    • Type: Constant
    • Value: Your public API key, that can be found under Account Settings page (please use the Public type of key!)
  2. configurationId:
    • Type: Constant
    • Value: The ID for your configuration (can be found in under View Widget Structure modal in the list of widgets).
  3. widgetId:
    • Type: Constant
    • Value: The widget ID associated with the configuration (can be found in under View Widget Structure modal in the list of widgets).
  4. optionId:
    • Type: Constant
    • Value: The identifier for the selected option (can be found in under View Widget Structure modal in the list of widgets).

      Creating a constant variable

Step 6a: Preview and test

  1. After creating the tag and trigger, click Preview in GTM to test your changes.
  2. Go to your website, fill out the form with an email, and check the consent checkbox.
  3. Once everything works as expected, click Submit to publish the changes in GTM.

 

Approach B: Directly accessing form fields using JavaScript

If you prefer not to use the Data Layer, you can directly access form fields using JavaScript within GTM. This method is simpler and more direct, suitable for basic use cases.

Step 2b: Modifying your HTML form for direct access

The HTML form remains the same as in Approach A:

<form id="consent-form">
  <label for="user-email">Enter your email:</label>
  <input type="email" id="user-email" name="email" required>

  <label for="user-consent">
    <input type="checkbox" id="user-consent" name="consent">
    I agree to the processing of my data
  </label>
  
  <button type="submit">Submit</button>
</form>

 

Step 3b: Creating a custom HTML tag for direct field access

Here, we will directly access the form fields without involving the Data Layer.

  1. In GTM, go to Tags and click New.
  2. Name your tag, for example, "Audience Unlocker with Direct Access".
  3. Select Custom HTML as the tag type.
  4. Insert the following code:
<script src="https://dc.preference-management.usercentrics.eu/latest/data-collector.js"></script>
<script>
  window.setupForm({
    event: {
      elementSelector: '#consent-form',   
      eventType: 'submit',
      observeDomChanges: false,
    },
    widgetId: "{{widgetId}}",  // Id of the Widget
    pacId: "{{configurationId}}",     // Id of UC PM Configuration
    publicApiKey: "{{apiKey}}",   // Public API Key
    userId: {
      selector: '#user-email',  // ID of the field, that contain User Email
    },
    inputs: [
      {
        selector: '#user-consent', // ID of the field, that contains consent signal
        optionUuid: "{{optionId}}",  // ID of the UC PM option, where consent will be stored
      }
    ],
  });
</script>

Step 4b: Setting up the Trigger

  1. In the Triggering section, create a new trigger.
  2. Choose Page View as the trigger type.
  3. Set the conditions to ensure the code embeddings happens on the specific page (i.e. having URL with /contact/ as part of it)
  4. Save the trigger.
 

Step 5b: Creating variables in GTM

For both approaches, you will need to create the following variables in GTM so that values can be dynamically inserted into the API request:

  1. apiKey:
    • Type: Constant
    • Value: Your public API key, which can be found under Account Settings page (please use the Public type of key)
  2. configurationId:
    • Type: Constant
    • Value: The ID for your configuration (can be found in under View Widget Structure modal in the list of widgets)
  3. widgetId:
    • Type: Constant
    • Value: The widget ID associated with the configuration (can be found in under View Widget Structure modal in the list of widgets)
  4. optionId:
    • Type: Constant
    • Value: The identifier for the selected option (can be found in under View Widget Structure modal in the list of widgets)

Step 6b: Preview and test

  1. After creating the tag and trigger, click Preview in GTM to test your changes.
  2. Visit your website, fill out the form, and make sure the consent checkbox is checked.
  3. Open the developer console in your browser or use the Network tab to confirm that the API request is being sent.
  4. Once everything works as expected, click Submit to publish your changes in GTM.

Conclusion

Both approaches enable you to submit form data through GTM. The Data Layer approach offers more structure and flexibility, while the direct access approach is simpler and ideal for straightforward use cases. Choose the method that best suits your needs, and enjoy seamless form submission and consent tracking using Google Tag Manager.