Skip to main content
Deutsch

Setting up your Audience Unlocker

Richard van der Velde
Updated

Prerequisites

Before setting up Audience Unlocker, ensure that your website includes a form with the following fields:

  • Email address (typically a text input field)

  • Consent to use zero-party data for marketing purposes (usually a checkbox), if you don't have any, you can either add a new element, or you can use any existing checkbox that already represents such consent decision

Example Form: A typical customer form should include fields like email address and a consent checkbox.

Example of customer's form
Example of customer's form
 

Setting up Audience Unlocker via self-onboarding

Step 1. Register the account

Begin by registering for the platform using either a login/password combination or Single Sign-On (SSO) with a Google or Microsoft account.

Usercentrics login screen
Usercentrics login screen
 

Step 2: Configure Preference Center details

Next, you'll configure your Preference Center, which enables users to manage their data preferences. During this step, you will need to provide:

  • Preference Center Title

  • Description (optional)

  • Preference Widget Title

  • Widget Description (optional)

  • Logo URL (we recommend using PNG format for optimal rendering across platforms, including emails)

  • Double Opt-in Activation (optional for added confirmation)

The values entered here will define how your Preference Center appears to users.

Values entered during Preference Center configuration

 

How it will look in the actual Preference Center page

 

Step 3. Define the fields of the form from which the data will be captured (direct implementation with JavaScript)

To capture the required data from your website's form, follow these steps:

  1. Access the website source code and locate the form's elements. Specifically, find:

    • Form ID (e.g., data_form)

    • Email Field ID (e.g., user_email)

    • Consent Checkbox Field ID (e.g., consent_field)

  2. These fields can be identified using the browser's inspection tool. Right-click on the form field you are identifying, select "Inspect," and review the form's HTML code to find the IDs.

  3. If there is no unique ID element available for this field, you can either add one, or use any existing CSS-selector (for example .ElementClassor div.anything > form)

Once you have identified these IDs, you will need to enter these in the next step of the onboarding process.

Example of field IDs location

 

Having these field IDs you can specify them on the next step of onboarding:

Enter the IDs of the fields you located during the next step of onboarding

 

Step 4. Specify your Google Customer Match target Customer List

In this step, you can specify the Google Ads Customer List that will receive the data captured through the form submissions. This ensures that the data is automatically transmitted to your designated customer list.

 

Step 5. Finish setup and integrate Audience Unlocker into your website

After completing the setup, the system will generate a code snippet based on your configuration. This snippet can be used to integrate Audience Unlocker into your webpage. You have three options for implementation: you can add it directly into the HTML of your website page, use Google Tag Manager, or, for the most robust option, update your server-side form-processing script to send the data to our platform.

Confirmation page of the onboarding process

 

Option 1: Direct insert code snippet into your page

Insert the JavaScript code directly into your web page’s HTML, following 2 steps:

  1. Copy the script tag below and paste it into the <head> section of your website. Make sure it is placed on all pages, that either contain the data submission forms or post-submission landing pages. 
    <script src="https://dc.preference-management.usercentrics.eu/latest/data-collector.js"></script>
  2. Add the generated pre-generated code snippet right after the data capture form, ensuring it is placed immediately after the form. By doing so, whenever a user submits the form and consents to data use, the information will be captured and transmitted to the appropriate Google Ads Customer List.

Code snippet added into the page HTML

 

Option 2: Google Tag Manager (GTM) integration

Alternatively, you can integrate the form using Google Tag Manager (GTM) if you prefer not to modify the source code directly. This method enables you to add the form tracking and data capture functionality through GTM without altering your website’s HTML.

For more detailed instructions on how to configure GTM with your existing form, please visit our Knowledge Base. This guide provides step by step instructions on using GTM to streamline the integration.

By using either method, your website will successfully capture user consent and data, transmitting it to the designated Google Ads Customer List.

Option 3: Integration using a server-side script

As most robust implementation approach it is recommended to use a server-side option, especially if you have certain validations that being applied during form processing (i.e. during new user sign-up, you might want to validate if you already have user with the same credentials). In this case, the server-side script should perform additional call to Usercentrics' end-point, sending the user’s data and consent decision to our platform.

Here is an example of such call:

url = 'https://preference-api.preference-management.usercentrics.eu/public/loyal/preferences'
headers = {
  'accept': 'application/json',
  'X-API-KEY': '[INSERT_PUBLIC-API-KEY_HERE]',
  'Content-Type': 'application/json'
}
data = {
  "pacId": "9bb8cd48-....-39ffe5adacfb", # Configuration ID
  "widgetId": "[WIDGET_ID]",
  "userId": "[USER_EMAIL]", # Replace with actual user email
  "answers": [
    "[OPTION_ID]" # Replace with actual option UUID
  ]
}
response = requests.post(url, headers=headers, json=data)

Step 6. Add a link to the Preference Center page on your website

To enable users to view and manage their data preferences, add a link to your website (e.g. in the footer) that directs them to the Preference Center. This link will enable users to request access to their preferences.

  https://app-preference.preference-management.usercentrics.eu/login/5ef3cc25-.......-730bb0452eeb?lng=[LANG_CODE]

You can also include an optional parameter (lng) to specify the language for the Preference Center interface.

Example of adding a link to the Preference Center page

 

Dialog window to request access link to Preference Center

 

Setting up Audience Unlocker using the Admin Interface

The Admin Interface enables comprehensive customization of your Preference Center. Easily modify the appearance, manage user preferences, and access essential data analytics. Key features of the Admin Interface include the ability to:

  • Adjust colors and text to match your branding

  • Add translations for multilingual support

  • Access basic analytics to monitor Preference Center performance

  • View and manage individual user preference data

For more advanced customization options and detailed analytics, please refer to the platform’s documentation.

You can also configure Audience Unlocker directly using the Admin interface, following these simple steps:

To use the Audience Unlocker, you need to create a widget within the Admin Interface. This widget should include at least one preference option where user consent will be stored.

Example of the widget with single Preference Option created

 

Step 2. Make sure you have Public API key available for your account

To enable direct data transmission from your website’s form to the Preference Manager database, you will need a Public API key. This key is used to authenticate communication with the UC Preference Manager API.

To generate a new API key, navigate to the Account Settings section in the Admin Interface.

API keys management

 

Step 3. Configure Google Customer Match Data Connector

Integration between the UC Preference Manager and Google Ads is essential for transmitting captured data. To configure this:

  • Create a new Google Customer Match connection in the Admin Interface.

  • Select the Preference Option from the widget created in Step 1 as the consent source.

  • Authenticate via Google SSO and choose the Google Ads Customer List where captured data will be sent.

 

Step 4. Integrate capture script into your website form

You have three options for integrating the data capture script into your form. Refer to step 5 from the self-onboarding section for detailed instructions on how to implement the code snippet.

The pre-generated code snippet can be found under the Implementation section in your Admin Interface configuration.

Implementation section where you can find pre-configured code snippet

 

Once you finish these steps, your Audience Unlocker setup will be complete, enabling seamless data capture and consent management for your marketing efforts.

Comments

0 comments

Please sign in to leave a comment.