February 19, 2025## Introduction
This tutorial delves into the advanced implementation of a Google Analytics 4 (GA4) dashboard in Looker Studio, leveraging BigQuery as the primary data source.
By the end of this guide, you will have constructed a robust acquisition dashboard to facilitate data-driven decision-making for stakeholders. If you are not yet familiar with GA4’s data export schema in BigQuery, it is highly advisable to review the official [Google Analytics 4 export schema documentation](https://support.google.com/analytics/answer/7029846?hl=en). This documentation provides crucial insights into column structures, expected values, and nested fields.
For instance, the `event_params` column consists of an array of records. Each record contains a `key` (parameter name) and a `value`, which is a struct that supports multiple data types such as `string_value`, `int_value`, and `double_value`.
Here is the [dashboard](https://lookerstudio.google.com/u/0/reporting/fb0c939c-dd51-4ac7-bc1f-f0adcff1edfd/page/rVYDD) that we will be constructing.
---
## Filters Ribbon
Filters enhance dashboard interactivity by enabling refined data views based on acquisition attributes. The primary filters included in this dashboard are:
- **Acquired Campaign**
- **Acquired Source**
- **Acquired Medium**
- **Date Range Picker**
### Available Dimensions and Metrics
Below is a comprehensive list of dimensions and metrics accessible via the BigQuery connector:
| Dimension | Type |
|-----------|------|
| Acquired Campaign | Text |
| Acquired Medium | Text |
| Acquired Source | Text |
| Advertising ID | Text |
| App ID | Text |
| App Install Source | Text |
| App Version | Text |
| City | Geo - City |
| Continent | Geo - Continent |
| Conversion | Boolean |
| Country | Geo - Country |
| Days Since First Touch | Number |
| Device Category | Text |
| Device Model (OS) | Text |
| Event Date | Date |
| Event Name | Text |
| Event Param Value | Number |
| Event Param Value (String) | Text |
| Event Previous Time | Date & Time |
| Event Time | Date & Time |
| Event Time Offset | Number |
| Event Value (USD) | Currency (USD - US Dollar ($)) |
| Firebase App ID | Text |
| First Touch Time | Date & Time |
| Language | Text |
| Limit Ad Tracking Enabled | Text |
| LTV Currency | Text |
| LTV Revenue | Currency (USD - US Dollar ($)) |
| Mobile Brand Name | Text |
| Mobile Model Name | Text |
| Mobile Marketing Name | Text |
| OS | Text |
| OS Version | Text |
| Platform | Text |
| Region | Country subdivision (1st level) |
| Stream ID | Text |
| Time Zone Offset | Number |
| User ID | Text |
| User Property Name | Text |
| User Property Value (Double) | Number |
| User Property Value (Integer) | Number |
| User Property Value (String) | Text |
| User Pseudo ID | Text |
| Event Count | Number |
| Unique Users | Number |
## User Overview Section
This section consists of:
- **Three scorecards:** Total Users, Active Users, and New Users
- **A time series chart** displaying these metrics over time
### Total Users
- **Metric:** Unique Users
- **To display percentage change**, enable the **Comparison Date Range** option and set it to **Previous Period**.
### Active Users
Since July 2023, Google Analytics 4 introduced the `is_active_user` field in BigQuery exports. If you are using this newer schema, simply apply a distinct count on `user_pseudo_id`. Otherwise, use the following filter combination:
**Filter Conditions:**
- `Event Param Name = engagement_time_msec` AND `Event Param Value > 0`
- OR `Event Param Name = session_engaged` AND `Event Param Value = 1`
**Metric:** COUNT DISTINCT on `user_pseudo_id`
### New Users
- **Metric:** Unique Users
- **Filter:** `Event Name = first_visit`
### Time Series Chart for Users
Since this chart contains multiple metrics, a **blended data source** is required, consisting of three tables:
- **Table 1:** Total Users (Unique Users)
- **Table 2:** Active Users (using the filters mentioned above)
- **Table 3:** New Users (using `first_visit` event filter)
**Join key:** Event Date
**Join type:** Left Outer
## Sessions Overview Section
This section contains:
- **Three scorecards:** Sessions, Engaged Sessions, and Engagement Rate
- **A time series chart**
### Sessions
- **Metric:** Event Count
- **Filter:** `Event Name = session_start`
### Engaged Sessions
- **Metric:** Event Count
- **Filter:** `Event Param Name = session_engaged` AND `Event Param Value = 1`
### Engagement Rate
- **Formula:** Engaged Sessions / Sessions
- Use blended data sources with a **cross join** (no join key required).
## Events Overview
This section presents a tabular view of events and their respective event counts.
- **Dimension:** Event Name
- **Metric:** Event Count
## Pages Overview
This section analyzes **page views per page title**.
**Filters:**
- `Event Name = page_view`
- `Event Param Name = page_title`
**Metrics & Dimensions:**
- **Dimension:** `Event Param Value (String)` → Rename to **Page Title**
- **Metric:** `Event Count` → Rename to **Views**
## Performance Overview
This section visualizes key performance indicators across three charts:
### Sessions by Country
- **Chart Type:** Geo Chart
- **Geo Dimension:** Country
- **Metric:** Event Count
- **Filter:** `Event Name = session_start`
- **Zoom Area:** World
### Top 5 Countries (Sessions)
- **Chart Type:** Bar Chart
- **Data Source:** Duplicate *Sessions by Country*
- **Limit Bars to:** 5 (Descending order by Sessions)
### Sessions by Source / Medium
- **Metric:** Sessions (Event Count with `session_start` filter)
- **Custom Dimension:** `CONCAT(Acquired Source, " / ", Acquired Medium)`
## Conclusion
By following this structured approach, you have developed a dynamic acquisition dashboard in Looker Studio powered by BigQuery. Mastering the manipulation of Google Analytics 4 data in SQL enables advanced analysis, custom metrics development, and deeper insights into user behavior. Continue exploring the dataset to refine your dashboard further and extract meaningful business intelligence.
October 3, 2024Data redaction is a feature in Google Analytics 4 that helps you protect your property ensuring, to an extent, that no Personally Identifiable Information (PII) is collected.
Configuring this feature in Google Analytics 4 is essential for adding an extra layer of security to your data collection efforts.
### What is a URL query parameter?
A URL query parameter is a key-value pair that follows the question mark (?) or (&) at the URL. For example, the event parameter, **form_destination** might contain a URL with query parameters such as `https://www.example.com/us?language=english&catalog=summer24`
## How does data redaction work?
This feature uses text patterns to identify likely to be email addresses in all event parameters and URL query parameters that are included as part of the event parameters `page_location`, `page_referrer`, `page_path`, `link_url`, `video_url`, `form_destination`
Data redaction evaluates events before they are collected to find and redact (remove) any text it understands as an email or query parameter key-value pair. After the redaction of the text, data collection proceeds as expected.
Data redaction evaluates events before they are collected to find and redact (remove) any text it understands as an email or query parameter key-value pair. After the redaction of the text, data collection proceeds as expected.
Again, while this is a powerful tool preventing you from sending or collecting PII inadvertently, the ultimate responsibility falls on you, the entity collecting the data. Please ensure that you are meeting all regulatory requirements for data collection, and do not rely on data redaction as your primary defence against sending or collecting PII. As mentioned before, this feature should be another tool in your arsenal and not your main tool.
### Is data redaction activated by default for Google Analytics 4?
Any property created after the release of this feature will have data redaction for email on by default. Data redaction for URL query parameters will still have to be configured separately. If your property was created before the release of this feature, you will need to configure data redaction for both email addresses and URL query parameters.
<aside>
💡
**Please note that data redaction is only available for web data streams.**
</aside>
### Data Redaction - Good to Know
- Data redaction evaluates event data for email addresses on a best-effort basis
- Data redaction occurs client side after Analytics modifies or creates events and **before** data is sent to Analytics
- Data redaction accepts recent-encoded URL query parameters, including Unicode characters accepted by browsers
- Data redaction may incorrectly interpret text as as an email address and redact the text. For instance, if the text contains `@` followed by a top-level domain name it may be incorrectly removed
- Data redaction does not evaluate HTTP-header value
- Data redaction won’t prevent the collection of PII via Measurement Protocol or Data Import
## How to configure data redaction in Google Analytics 4?
To configure data redaction in Google Analytics 4, you can follow these steps:
1. In the Admin section, under *Data collection and modification*, click **Data Streams**
2. Select the relevant web data steam
3. Click **Redact data**
4. Turn on the switch for each option you want to activate data redaction for
1. Email
2. URL query parameters
5. If you chose to active data redaction for URL query parameters, enter a comma delimited list
1. For example: first_name, last_name, email, address, phone_number
6. The last step is to test URL query parameters data redaction using the **Test data redaction** feature to see how Analytics removes the data in question
1. Under the data in the text field. Make sure it contains URL query parameters you entered in the previous step
1. https://www.example.com/?firstname=John&lastname=Doe&email_address=johandoe@example.com
2. Click preview redacted data
1. [https://www.example.com/?firstname=(redacted)&lastname=(redacted)&email_address=(redacted)](https://www.example.com/?firstname=(redacted)&lastname=(redacted)&email_address=(redacted))
If you are satisfied with the result, then you are done. Otherwise, change the URL query parameters until you get the intended result.
## Conclusion
Data redaction is a very powerful feature that allows you to protect your property from collecting PII inadvertently. Combining this with Consent Mode can ensure that your business is compliant with data regulations and that no data is being passed while it should not.
February 24, 2024In our [previous discussion](/swetrix), we explored Swetrix, an innovative, open-source web analytics tool beneficial for businesses seeking to evaluate their online performance. This chapter` will guide you on leveraging Swetrix data to create a personalized dashboard, providing essential insights for website optimization. For those interested, the complete code is accessible on [Github](https://github.com/AzizDhaouadi/swetrix-plotly), allowing you to clone the project and tailor your dashboard.
This tutorial employs Express, JavaScript, and Plotly.js to craft a dashboard showcasing data such as pageviews, unique visitors, session durations, bounce rates, average page speeds, and more, offering a comprehensive view of your website's performance. The flexibility of the project means you can adjust the dashboard's design to meet your specific needs.
For this tutorial, we will be using Express, JavaScript and Plotly.js to build a dashboard that shows the following data:
- Pageviews
- Unique visitors
- Session duration
- Bounce rate
- Average page speed
- Traffic per country
- Unique visitors Tech Breakdown
- Unique visitors per browser
- Unique visitors per Device Category
- Unique Visitors per OS
- Visits per page
- Visits per referrer
- Custom events breakdown
As you can see this dashboard contains all the necessary information for us to make decisions about the performance of our website. And the good news is we can make this dashboard look and feel the way we want as we have full control over the code.
## Project Anatomy
The first thing we need to get started is a Swetrix account with data collected in order to visualize it. If you need to create a Swetrix account, you can so using their [sign up page](https://swetrix.com/signup). If it's your first time using this tool, you can refer to their [official documentation](https://docs.swetrix.com/). Once you are setup, it's time to get started.
### Express, Plotly.js, and Dependencies
As mentioned above, the main components of this project are Express, Plotly.js and JavaScript. If you do note have Node.js installed on your machine, please do so. You will this in the upcoming steps. The following are the dependencies we need to get things going:
- Express
- Node-fetch
- Dotenv
You do not have to worry about installing these if you are going to clone the project. The Readme file contains all the details you need to get started. The point of explaining these dependencies is to understand their role in the project, so everything is clear.
## Swetrix's Statistics API
A core aspect of this project is the Swetrix Statistics API, which provides access to the data displayed in the Swetrix dashboard. We will use specific API endpoints (/log, /log/birdseye, /log/performance) to fetch necessary data for our dashboard. Familiarity with the Fetch API and asynchronous JavaScript will be beneficial here.. If you are not familiar with the fetch API, you can read more about it in depth in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). Additionally, being familiar with Async JavaScript would be a plus.
## API Endpoints
To retrieve the data we need, we will be using 3 endpoints being:
- /log
- /log/birdseye
- /log/performance
Each endpoint will return to us a specific set of data that we will use to create our charts.
### Log Endpoint
This endpoint will return all the data we need about our traffic. In truth, most of the charts mentioned above will be built using the data from this endpoint.
### Log Birdseye Endpoint
This endpoint will return the traffic overview data. You can this of it as an executive summary of the log endpoint data set.
### Log Performance API
This endpoint returns data regarding the performance of our website. For instance, the average page load speed time is one of the data points that can be found querying this endpoint.
## Implementation Details
### Index.js File
Now that we understand what our data source is and what our dependencies are, it's time to dive into the source code. The first file we are going to take a look at is the index.js file. The latter is the point of entry to our application and contains the code to tell our server what to do. The code in this file is setting essential variables we need for our application, and defines API routes that fetch data from the Swetrix Statistics API when queried. Let's take a look at the fetch variable.
```js
const fetch = (...args) =>
import("node-fetch").then(({ default: fetch }) => fetch(...args));
```
One of the project's dependencies is Node-fetch. This is a lightweight module that brings the Fetch API to Node.js. You can read more about this package on [NPM's documentation](https://www.npmjs.com/package/node-fetch).
#### app.get('fetch/\*')
The index.js file contains multiple app.get functions with routes that look like fetch/\*. These functions tell our server what to do when a get request at the given route is called. For instance, when the server gets a get request at the route /fetch/trafficData it will send a get request to Swetrix's log API endpoint to fetch traffic data. Each app.get function is designed to get specific data from Swetrix's servers. The reason we are defining these functions instead of using the fetch API client-side is to avoid exposing the API key. In fact, client-side fetch requests will be sent to our designated endpoints which in turn will fetch the required data. The dotenv package helps use define and use environment variables in our project so that sensitive information like API keys are not exposed. If you are going to use environment variables ensure to add the .env file to the add .gitignore file so that you do not commit your data to a repository.
#### app.use()
In our Express application, using `app.use(express.static(path.join(__dirname, "/public")));` is a good way to serve static files such as images, CSS files, and JavaScript files. This line tells Express to serve the static files from a directory named public located in the root of your application. The path.join(\_\_dirname, "/public") part constructs an absolute path to the public directory, which helps avoid issues related to the difference in file paths across operating systems.
## Index.html
The index.html file has a very straightforward structure. Note that we are using Boostrap for this project to make styling and responsiveness much easier to handle. Most of the HTML elements in this file will have their content added/updated with JavaScript.
## JS folder
In our JS folder, you will see two subfolders and 3 files. Each file starts with render and the rest of the name describes what it will be rendering. For instance, the file `renderTrafficData` is going to be used to render traffic data. Let's breakdown the anatomy of the file in order to get an idea of how data is being rendered.
### renderTrafficData.js
The file contains 7 import statements. The import statements are getting us the functions necessary to render the charts using Plotly.js. The next thing we see in the file is the`fetchTrafficData` which will be used to fetch the data we are going to pass to our visualization functions. The fetch request is actually sent to our endpoints. The second function uses the data we fetched to visualize the data using Plotly. All the Plotly-related code is in the dashboardVisualizations folder. The code was kept separate to make readability easier.
## Conclusion
This tutorial provides a comprehensive guide to building a custom dashboard using Swetrix data. By understanding the project's structure and implementation, you can adapt and extend your dashboard, integrating web analytics with other tools for richer insights.
September 15, 2024As tracking restrictions become tighter and tighter, enabling ad platforms with First-Party data has never been more important. In this tutorial, we will discuss how you can implement Google Ads' Enhanced Conversions with Google Tag Manager to provide Google Ads with the right data for your campaign optimizations.
## What is Enhanced Conversions?
Enhanced conversions is a feature that aims at improving the accuracy of conversion measurement. The feature supplements any existing conversion tags by sending hashed first-party data collected from the website while being privacy compliant. Enhanced Conversions uses a secure one-way hashing algorithm known as `SHA256` on your data before sending to Google. This ensures that customer data such as email addresses are protected. This hashed data is later matched with signed-in Google accounts to attribute your conversion to ad events, such as clicks or views.
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
💡 Conversions measured by importing <a href="https://support.google.com/google-ads/answer/2401634" target="_blank">Google Analytics</a> goals aren't supported for enhanced conversions. If you'd like to use enhanced conversions, consider setting up a new Google Ads conversion action with the Google tag or Google Tag Manager.
</aside>
## Implementation Pre-requisites
Before we dive into the implementation, it is recommended to review this list to ensure that the implementation goes as smoothly as possible:
- Know where the conversion tag fires. What is the conversion page URL? This can be a confirmation page URL.
- What is the conversion event trigger? How does the conversion tag fire? Is it a button click? Or is it a form submission? Or is it on a page view?
- Make sure that there is first-party customer data available on the conversion page. The available data should be email, full name and home address and/or phone number
- How is the conversion tracking set up? This setup requires an understanding of the conversion tracking setup and possibly code changes. So, make sure you have access to the code base or you have access to your developers to communicate requirements
- If your conversion tags are set using URLs, enhanced conversions can only be set using Javascript or CSS selectors options or automatic enhanced conversions
- The impact results in the conversion action table willƒ be seen about 30 days after implementing enhanced conversions successfully.
## Turning on Enhanced Conversions for Web
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
🚨 The following instructions are based on the new design of the Google Ads user experience.
</aside>
1. In your Google Ads account, click the **Goals** icon .
2. Click the **Conversions** drop down in the section menu.
3. Click **Settings**.
4. Expand the “Enhanced conversions” section.
5. Check “Turn on enhanced conversions for web”.
6. Review compliance statement. To enable enhanced conversions you must confirm that you'll comply with our [policies](https://support.google.com/adspolicy/answer/7475709) and that the [Google Ads Data Processing Terms](https://privacy.google.com/businesses/processorterms/) apply to your use of enhanced conversions. Click **Agree** **and continue** to acknowledge your acceptance of these terms.
7. Click the dropdown to choose a method for setting up and managing user-provided data. Select “Google Tag Manager”.
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
🚨 <b>Note</b>: If Google enhanced conversions data is collected in a way that’s different from Google Tag Manager, that data may not be processed. For instance, since we selected that we are going to send enhanced conversion data through Google Tag Manager and we try sending data through the Google Ads API, the data sent through API won’t be processed.
</aside>
8. Click Go to **Google Tag Manager** and follow the instructions to complete the process in Google Tag Manager
## Setting up Enhanced Conversions in Google Tag Manager
There are 3 ways we can set up enhanced conversion in Google Tag Manager, and we will review them separately so you can choose the method that suits you best.
- **Automatic collection**: This method allows the tag to automatically detect and collect user-provided data on the page. This method is the easiest and quickest out of the three, but it is not as reliable as adding a code snippet or specifying CSS selectors or Javascript variables.
- **Code**: Add a code snippet on the website that sends hashed user-provided data for matching. This method is the most reliable as it ensures that you are consistently sending properly formatted data whenever the conversion tag fires. This method is the most suitable if you wish to enhance the accuracy of enhanced conversions.
- **Manual configuration**: Specify which CSS selectors or Javascript variable on the conversion page contain the relevant user-provided data. This method is more precise than the automatic collection, but it is not as reliable or consistent as adding code to the website. This method is not recommended is you frequently change the website’s code. The latter can create inconsistencies that may break enhanced conversion tracking. If you do consistently update your code base, it is recommended that you use dataLayer variable or add code to your website to capture user-provided data. To reiterate, if you frequently change the website formatting, this method is not recommended it could disrupt the CSS selector method event the Javascript method if you are creating your variables based on `querySelector` or `querySelectorAll`
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
💡 It is best practice to use the ID or data attributes to retrieve the value from a DOM element. IDs are unique and less likely to change over time. Data attributes are also less prone to change over time. Both of these attributes change less over time unlike properties such classes.
</aside>
### Set up enhanced conversions using automatic collection in Google Tag Manager
Automatic collection can be set up using 2 different methods:
- **Standard automatic enhanced conversions**: this is the recommended method when user-provided data is available on the conversion event page. For instance, if your conversion event page is a purchase confirmation page and data present on the page includes the user details such as email, phone number or address, use this method.
- **Automatic enhanced conversions with the user-provided data event tag**: this is the recommended method when the customer data is not available on the conversion event page, but it is instead available on a previous page. For instance, if the conversion event page is the purchase confirmation page and user’s data is entered on a previous page prior to the confirmation page, use this method.
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
<b>Note</b>: If you use the user-provided data event tag method, first-party customer data will be automatically detected on pages that users visit before reaching the conversion page. With this setup, you authorize Google to use an ads cookie to collect hashed, first-party customer data on your behalf and to connect that data with subsequent conversion events occurring within the same user session on your behalf. All data not connected to a conversion is deleted. If you implement Consent Mode, the ads cookie will be subjected to the ad_storage consent status of the Consent Mode feature, where implemented.
</aside>
### Set up standard automatic enhanced conversions
1. Click **Workspace**, then click **Tags** from the navigation menu.
2. Select the Google Ads conversion tracking tag that you’d like to implement enhanced conversions with and edit that tag.
- Make sure that this conversion action has the same conversion tracking ID and label as the conversion action that you enabled enhanced conversions for in your Google Ads account.
3. Click **Include user-provided data from your website**.
4. In the dropdown, select **New Variable** or use an existing variable if you’ve already set one up.
5. Select **Automatic collection**.
6. Click **Save** for the variable and then save the conversion tracking tag.
### Set up automatic enhanced conversions with user-provided data event tag
1. Click **Workspace**, then click **Tags** from the navigation menu.
2. Click **New** to create a new tag.
3. Click **Tag Configuration** and select **Google Ads User-Provided Data Event**.
4. Fill in your Google Ads Conversion Tracking ID.
- Make sure that this conversion action has the same conversion tracking ID and label as the conversion action that you enabled enhanced conversions for in your Google Ads account.
5. In the dropdown, select **New Variable**.
6. Select **Automatic**.
7. Name the variable.
8. Click **Save**.
9. Click **Triggering** in the Google Ads User-Provided Data Event Tag. This is where you anticipate that the user data will be available.
10. Click the plus icon.
11. Click **Trigger Configuration**.
12. Click **Form Submission**.
13. Select **All Forms**.
14. Select **Save** and then save your new Google Ads User-Provided Data Event tag.
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
<b>Note</b>: You must select form submission for enhanced conversions to work properly
</aside>
### Set up conversions using manual configuration in Google Tag Manager
The first step in this method is to find which variables we are going to use to set up enhanced conversions.
1. Navigate to the page where user-provided data appears. This data may appear on the conversion page or on a previous page. Identify any customer data that is displayed on the page you want to send to Google. At least one of the following fields must be provided:
1. Email (preferred)
2. Address - First name, last name, postal code, and country are required
1. Optional: Street address, city, and region as additional match keys
3. A phone number can also be provided as a standalone match key but is recommended to be sent along with an email
2. Once the customer data on the page is identified, you will need to copy the CSS selectors and enter those in Google Tag Manager. You can also data layer variables if they already exist. This allows enhanced conversion tags to know which pieces of data to hash and send to Google. It’s important to keep the conversion page open.
3. In a separate tab, open Google Tag Manager to set up manual enhanced conversions. This can be done in 2 different ways.
1. **Standard manual enhanced conversions**: Use this method when user-provided data is available on the conversion event page.
2. **Manual enhanced conversions with user-provided data event tag**: Use this method when user-provided data is not available on the conversion event page but is instead available on a previous page
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
<b>Note</b>: If you use the user-provided data event tag method, first-party customer data will be automatically detected on pages that users visit before reaching the conversion page. With this setup, you authorize Google to use an ads cookie to collect hashed, first-party customer data on your behalf and to connect that data with subsequent conversion events occurring within the same user session on your behalf. All data that is not connected to a conversion is deleted. If you implement Consent Mode, the ads cookie will be subjected to the ad_storage consent status of the Consent Mode feature, where implemented.
</aside>
### Set up standard manual enhanced conversions
1. Click **Workspace**, then click **Tags** from the navigation menu.
2. Select the Google Ads conversion tracking tag that you’d like to implement enhanced conversions with and edit that tag.
- Make sure that this conversion action has the same conversion tracking ID and label as the conversion action that you enabled enhanced conversions for in your Google Ads account.
3. Click **Include user-provided data from your website**.
4. In the dropdown, select **New Variable** or use an existing variable if you’ve already set one up.
5. Select **Manual configuration**.
- You may also select “Code” if you'd like to use Custom Javascript or other data objects to send your data through Google Tag Manager. This method requires data to be formatted in a particular way, so if you’d like to do this, you can read the “Code” instructions below. Here you'll see “User provided data” at the top of the page, followed by all the pieces of customer data which you can include as part of your enhanced conversion tag.
6. For the relevant user data field that you'd like to provide via enhanced conversions, click on the dropdown menu and select **New Variable**.
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
<b>Note</b>: if you already have unhashed variables in the data layer, you can select those instead of creating new variable.
</aside>
1. In the “Variable Configuration” screen, select **Choose a variable type to begin setup**. In the “Choose Variable Type” screen, select **DOM Element**.
2. Back on the “Variable Configuration” screen, change “Selection Method” in the dropdown to “CSS Selector.”
3. Give your variable a title.
4. Enter the CSS selector that references your users’ data into the “Element selector” input field (see section below on how to find the CSS Selector). You can leave the “Attribute name” field blank (more on this below).
5. Click **Save** for the variable and then save the conversion tracking tag.
### Set up manual enhanced conversions with the user-provided data event tag
1. Click **New** to create a new tag.
2. Click **Tag Configuration** and select **Google Ads User-Provided Data Event**.
3. Fill in your Google Ads Conversion Tracking ID.
- Make sure that this conversion action has the same conversion tracking ID and label as the conversion action that you enabled enhanced conversions for in your Google Ads account.
4. In the dropdown, select **New Variable**.
5. Select **Manual configuration**.
6. For the relevant user data field that you'd like to provide via enhanced conversions, click on the dropdown menu and select **New Variable**.
7. In the “Variable Configuration” screen, select **Choose a variable type to begin setup**. In the “Choose Variable Type” screen, select **DOM Element**.
8. Back on the “Variable Configuration” screen, change “Selection Method” in the dropdown to “CSS Selector.”
9. Give your variable a title.
10. Enter the CSS selector that references your users’ data into the “Element selector” input field (see section below on how to find the CSS Selector). You can leave the “Attribute name” field blank. (more on this below).
11. Click **Save**.
12. Click **Triggering** in the Google Ads User-Provided Data Event Tag. This is where you anticipate that the user data will be available.
13. Click the plus icon.
14. Click **Trigger Configuration**.
15. Click **Form Submission**.
16. Select **All Forms**
17. Select **Save** and then save your new Google Ads User-Provided Data Event tag
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
<b>Note</b>: You must select form submission for enhanced conversions to work properly
</aside>
### Identifying CSS Selectors and inputing them in Google Tag Manager
This section is for readers that are not familiar with CSS Selectors. If you are, you can skip ahead. This section will show you how to copy CSS Selectors from you conversion event page and paste them into enhanced conversions variables. If you already have data layer variables that capture the relevant data, you can use those instead of creating new variables.
1. Navigate to your website in a separate and keep (or open) a Google Tag Manager page
2. Identify the user-provided data you want to send with enhanced conversions. This data may be on the conversion page or on a previous page
3. Use your mouse to right-click on top of it and select **Inspect**
4. You will see the **Developer** **Tools** launch within your browser
5. Within the source code presented in the Developer Tools page, you will see highlighted code. This code is the page element where you need to extract CSS Selectors for the customer data your right-clicked
6. Depending on your browser, select **Copy Selector**
7. In the other tab, with Google Tag Manager open, paste that text in the **Element selector** field
1. For reference, it should look something similar to but not exactly like this `tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail`
8. Click **Save**
9. Repeat the steps above for all the user-provided data you want to send with enhanced conversions
10. In Google Tag Manager, click **Save**
## Set up enhanced conversions using Code in Google Tag Manager
### Identify and define enhanced conversions variables
In this step, the goal is to make sure the variables needed like email, address are available on the conversion page where the Google Ads conversion tag fires. If you are unsure which page this is, contact your developer. Once you have confirmed which information is available on the conversion event page, you will need to store this data inside a global Javascript variables.
You can either send unhashed data, which Google will normalize and hash before the data reaches the servers. Or, you can normalize and hash data yourself.
### Hashing and normalizing data
If you decide to normalize and hash the data yourself, follow these instructions:
### Normalization:
- Remove leading or trailing whitespaces
- Convert the text to lowercase
- Format phone numbers according to the [E.164 strandard](https://en.wikipedia.org/wiki/E.164)
### Hashing
- Use hex [SHA256](https://support.google.com/google-ads/answer/9004655)
The following table lists more information about customer data variables. You can name the variables as you prefer and use the `Key Name` column to know how said variable should be referenced in the enhanced conversions tag. Please note, all data shoud be passed as `String` type variable.
| **Data Field** | **Key Name** | **Description** |
| --- | --- | --- |
| Email address | `email` | User email.
| Email address | `sha256_email_address` | Hashed user email.
| Phone number | `phone_number` | User phone number. Must be in [E.164 format](https://en.wikipedia.org/wiki/E.164), which means it must be 11 to 15 digits including a plus sign (+) prefix and country code with no dashes, parentheses, or spaces.
| Phone number | `sha256_phone_number` | Hashed user phone number.
| First name | `address.first_name` | User first name.
| First name | `address.sha256_first_name` | Hashed user first name.
| Surname | `address.last_name` | User last name.
| Surname | `address.sha256_last_name` | Hashed user last name.
| Street address | `address.street` | User street address. Example: '123 New Rd' |
| City | `address.city` | User city name. Example: `Southampton’ |
| Region | `address.region` | User province, state, or region. Example: `Hampshire’ |
| Postal code | `address.postal_code` | User post code. Example: 'SO99 9XX' |
| Country | `address.country` | User country code. Example: 'UK'. Use 2-letter country codes, per the ISO 3166-1 alpha-2 standard. |
The next steps will be to enable enhanced conversions in Google Tag Manager and reference the customer data variables.
### Enable enhanced conversions in Google Tag Manager
1. Sign in to Google Tag Manager, click **Workspace** then click **Tags** from the navigation menu
2. Select the Google Ads conversion tracking tag and edit the tag
1. If you have not set up your Google Ads conversion tracking tag, you can read more about that in [Google Ads conversions](https://support.google.com/tagmanager/answer/6105160)
2. Make sure this conversion action has the same conversion tracking ID and label as the conversion as the conversion action you enabled enhanced conversions for in Google Ads
3. Click **Include user-provided data from your website**
4. Click **Select user-provided data variable**, the select **New Variable**
5. In the new `User Provided data variable` , select **Code** at the bottom
6. Under `Choose Variable Type` , select **Custom Javascript**
7. Copy the following code in the custom Javascript variable
```javascript
function () {
return {
"email": yourEmailVariable , // replace yourEmailVariable with variable name that captures your user’s email
"phone_number": yourPhoneVariable , // repeat for yourPhoneVariable and following variable names below
"address": {
"first_name": yourFirstNameVariable ,
"last_name": yourLastNameVariable ,
"street": yourStreetAddressVariable ,
"city": yourCityVariable ,
"region": yourRegionVariable ,
"postal_code": yourPostalCodeVariable ,
"country": yourCountryVariable
}
}
}
```
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
💡 <b>Note</b>: you can also hardcode the field with a string or use a function instead of using variables
</aside>
### Code sample for normalized and hashed variables
```javascript
gtag("set", "user_data", {
sha256_email_address: yourNormalizedandHashedEmailVariable,
sha256_phone_number: yourNormalizedandHashedPhoneVariable,
address: {
"address.sha256_first_name": yourNormalizedandHashedFirstNameVariable,
"address.sha256_last_name": yourNormalizedandHashedLastNameVariable,
city: yourCityVariable,
region: yourRegionVariable,
postal_code: yourPostalCodeVariable,
country: yourCountryVariable,
},
});
```
As mentioned above, the phone number must be in E.164 format, which means it must be 11 to 15 digits including a plus sign (+) prefix and country code with no dashes, brackets or spaces.
1. For each type of customer information in the code above, replace the placeholder variables with the name of the global Javascript variable containing the piece of customer data on the conversion page
1. If your site does not collect a field, remove the field entirely from the code rather than leaving it blank. For instance, if your website only collects emails, your Javascript variable would look like this:
```javascript
function(){
return {
"email": yourEmailVariable
}
}
```
2. Click **Save**
The next step is validate that enhanced conversions is working properly.
## Validate Enhanced Conversions Implementation
To verify your implementation, navigate the conversion page and follow the steps below. Please test your implementation as soon as you are done with your set up.
### Validate the implementation using Developer Tool
1. Rick click on your web page
2. Click **Inspect** and select the **Network** tab
3. Make sure Network activity is being recorded
4. Enter `google` in the search bar
5. Find the network request that is going to `googleadservices.com/pagead/conversion` or `google.com/pagead/1p-conversion`
6. Click **Payload** to view the list of query string parameters
7. Look for a parameter `em` with a hashed string as the value. The value should start with `tv.1~em` followed by a long string of characters. If you see the `em` parameter, this means that the enhanced conversion tag is picking up and hashing the enhanced_conversion_data object
<aside style="background: #f1f1ef; width: 100%; border-radius: 4px; padding: 12px 16px 12px 12px">
💡 If you see the `em` parameter but you only see `tv.1~em` without a long hashed sting following it then you are sending the enhanced conversions parameter but it is empty. This may happen if user-provided data is not available at the time of conversion.
</aside>
### Review the Diagnostics report to confirm your implementation (after 48 hours)
After 48 hours of implementing enhanced conversions, you’ll be able to view the tag diagnostics report in Google Ads, which you can use to validate that the implementation is working properly. Follow these instructions to get there:
1. In the Google Ads account, click the Goals icon
2. Click the Conversions drop down in the section menu, then click Summary
3. Click the conversion action that has enhanced conversions enabled
4. Select Diagnostics from the page menu at the top. You’ll be able to see your enhanced conversion tag diagnostics report and the metrics for your enhanced conversion in each section
5. Review the various health checks to make sure everything is working as expected
6. If the tag diagnostics report notified you that something may be wrong, follow the instructions in the notification and the Help Center to troubleshoot
August 17, 2024Data collection on the web has changed over the years, and while it is easier now with many tools at our disposal, it is also harder; in a sense. With data privacy laws becoming stricter and stricter, data collection and measurements have to keep up in order to stay compliant and offer the users the best experience; an honest experience that lets them know what data will be collected and what data will be tied back to them. In today's post, we will look at how you can make sure your data collection and web measurement comply with the users' consent choices. The tools we are going to be using are CookiYes as the Cookie Consent Solution, Google Consent Mode, Google Tag Manager, and Google Analytics 4. Before we begin though, let's define some terms so that everything is clear.
## Consent Mode & Cookie Consent Solution
### Cookie Consent Solution
A cookie consent solution refers to a set of tools, practices, and functionalities used by website owners and operators to obtain user consent for the use of cookies and similar tracking technologies on their websites or online platforms. Cookies are small pieces of data that are stored on a user's device (such as a computer or smartphone) when they interact with a website. These cookies serve various purposes, including analyzing user behavior, remembering login credentials, and providing personalized experiences. A cookie consent solution typically involves the following components:
1. **Consent Banner/Popup**: When a user visits a website, a banner or popup is displayed informing them about the use of cookies and similar tracking technologies. This banner typically includes information about the types of cookies used, their purposes, and a link to the website's privacy policy.
2. **Consent Management Platform (CMP)**: A consent management platform is a tool that allows website owners to create, customize, and manage their cookie consent banners and user preferences. It enables users to provide or withdraw consent for different types of cookies and allows website operators to track and document user consent.
3. **Granular Consent Options**: A good cookie consent solution provides users with granular options to choose which types of cookies they want to consent to. This could include different categories such as functional cookies, analytical cookies, advertising cookies, and more.
4. **Link to Privacy Policy**: The consent banner typically includes a link to the website's privacy policy, which provides detailed information about how the website collects, processes, and shares user data.
5. **Opt-Out Mechanism**: Users should have the ability to change their consent preferences or withdraw their consent at any time. The consent solution should provide an easy way for users to opt-out of specific cookie categories or all cookies.
6. **Documentation and Reporting**: The solution should allow website owners to keep records of user consents and provide reporting features to demonstrate compliance with relevant data protection regulations.
7. **Responsive Design**: The consent banner and user interface should be designed to work well on different devices, such as desktops, tablets, and smartphones.
Implementing a robust cookie consent solution helps website operators respect users' privacy rights, maintain legal compliance, and build trust by being transparent about their data collection and usage practices.
## Google Consent Mode
Consent Mode enables you to inform Google about your users' consent status for cookies or app identifiers. This way, tags can adjust their behavior accordingly, respecting users' choices. When you integrate Consent Mode with your Consent Management Platform (CMP) or custom setup, like a cookie consent banner, it seamlessly receives users' consent preferences. Consent Mode then dynamically adjusts the behavior of Google Analytics, Ads, and third-party tags that rely on cookies. In cases where users deny consent, instead of storing cookies, tags send signals (pings) to Google. If you are using Google Analytics 4, any gaps in data collection are supplemented by conversion modeling and behavioral modeling techniques used by Google.
## Implementing CookieYes
Now that the definitions are out of the way, we can get started with the implementation. The first step is to implement our cookie banner. As mentioned above, we are going to be using CookieYes as our CMP. Let's get into it.
The first thing to do is to head to [CookieYes's website](https://www.cookieyes.com/) and sign up for a free trial. Once your account is created, the next step is to follow up the instructions to style the cookie banner.
You can customize the cookie banner or proceed with the default template. You can always customize the banner later by heading to **Dashboard > Consent banner**. Once you are done with the set up, click next step. At this point, you should see a popup containing the installation script for your cookie banner. The only thing left is to install the script, and test it. CookieYes has a lot of integration with CMS and website builders and if you are using one, check the list because the installation may differ a bit:
### CMS & Website Builders Integrations
- Angular
- React.js
- Vue.js
- Nuxt.js
- Gatsby
- Next.js
- Kartra
- Kajabi
- MODX
- ImpressPages
- Shopify
- Weebly
- Magento
- Squarespace
- Wix
- WordPress
- Joomla
- Drupal
- Blogger
If you do not see your CMS or website builder, do not worry. Simply, copy/paste the installation script in your head element and put it as high as possible. Once you the installation is done, verify your installation. If you are having an issue, feel free to connect with support.
## Google Tag Manager & Consent Mode
Once the cookie banner has been implemented, it is time to continue the action with Google Tag Manager and the Consent Mode. Before we continue with Google Tag Manager, we need to confirm that our banner has been properly set up. To do that, head to you website and check if you are able to see the consent banner. Once you see the consent banner, confirm your choice. It does not matter what you select, so long as you make a choice. Once your choice is made, open the Web Developer Tools and find the cookies section; if you are using Firefox this should be in the Storage section. You should be seeing something as follows:
The cookie name is equal to cookieyes-consent. If you are able to see this cookie, then you are ready to continue. If you cannot see this cookie, please make sure to go over the implementation steps until you are able to see this cookie. Proceeding without this cookie will cause errors.
Time to move to Google Tag Manager (GTM). In GTM, head to the variable section, and create a new **User-Defined** variable. Select 1st Party Cookie as the type of the variable and type **cookieyes-consent** inside the Cookie Name input field. Also, make sure to check URI-decode cookie option. Your window should look something like this:
Add a name distinctive name to your variable and save it. Essentially, what we just did is create a Google Tag Manager variable that will have the same value as our cookiyes-cookie. This is going to be very useful as it will help us avoid reading the value of the cookie with JS everytime we need it. The next step is to preview the value of said varibale. To do so, we need to preview our workspace. Once your debugging window loads, select any event (window loaded for instance) and look for your variable in the variables tab. You should see something similar to this:
If you are not able to see a value attached to your cookie, try another event. If you are still seeing nothing, delete the variable and go over the creation steps one more time. Now that we have a value attached to our cookie, it is time to decode the value to understand how we can translate it into consent. Let's have a look at the value:
```
consentid:c3hRRGJBeGJucEdMd0l4ZlpoclhIS3ZoRFRIaXN5TkY,
consent:no,action:,necessary:yes,functional:no,analytics:no,performance:no,advertisement:no,other:no
```
First things first, it is important to note that this is a string. Second, this string contains the state of the consent. Third, this value will update as the use updates their consent preferences. Fourth, the part that will be using to capture the user's consent from this string is the following:
```
necessary:yes,functional:no,analytics:no,performance:no,advertisement:no,other:no
```
This substring contains the user's consent preferences regarding:
- Necessary cookies
- Functional cookies
- Analytics cookies
- Performance cookies
- Advertisement cookies
- Other cookies
The next task is to transform this substring into variables we can use to store the user's consent. Variables that we can update we every time the consent changes. To do this, we will use good old JavaScript. Here's a code snippet that allow us to create a variable that stores the user's consent regarding advertising cookies:
```js
function returnAdvertisementConsent() {
var cookieYesConsentCookie = {{var_cookieYesConsentCookie}};
var grantedSubstring = ',advertisement:yes,';
if (!cookieYesConsentCookie || cookieYesConsentCookie.indexOf(grantedSubstring) === -1) {
return 'denied';
}
return 'granted';
}
```
Please note that you will have to replace {{var_cookieYesConsentCookie}} with your 1st Party Cookie name created in the steps above. The code snippet checks if cookieYesConsentCookie is not falsy (this does not mean false) and if the value of cookieYesConsentCookie does not include ,advertisement:yes,. If any of these conditons are met, our variable will have the value denied. Else, the variable will have the value granded. In Google Tag Manager, create a new User-Defined variable and choose Custom JavaScript as the variable type. Paste the code snippet above, name your variable and save it. Once your variable is created, repeat the same steps for each consent type you would want to capture. Do not forget to change the value of the grantedSubstring variable to reflect the consent your need. For instance, if you are intrested in capturing Analytics consent, then the variable should be declared as follows:
```js
var grantedSubstring = ",analytics:yes,";
```
Once all of your variables have been defined, it is time to check if they have been correctly declared. For our first test, we will be accepting all cookies and check if all of our declared variables will have granted as their value. Preview the workspace where you have applied your changes, accept all cookies and take a look the variables section. Please remember to check all the variables you have created to check if you are seeing the correct values. Once you have confirmed that everything looks good, it is time for the second test. Before doing so, delete the cookieyes-consent cookie. Once that has been done, close the debugging window and preview your workspace again. You should see the consent banner showing up, and this time reject all cookies.
Please note that necessary cookies will always be accepted as they are required for the website to properly function. Once you have confirmed that the test has been successful, it is recommended to run couple of other tests where you accept some cookie categories and deny others just to ensure that everything is working as expected. Notice that we have not used the Consent Mode just yet. We will get to that part later on but fow now, we still have some configuration to do in Google Tag Manager before enabling the consent mode.
Now that we have our variables ready, we need to figure out a way to let Google Tag Manager update the variables once the user has changed their consent to make sure our events fire in respect to the user's consent. So far, if the user changes their consent, there is no way to communicate that to Google Tag Manager. This means that we are able to capture the status of the consent when the user first lands on the site, but we will not be able to adapt to their preferences if they change them. To do this, we will be using a tag that allow us to update our variables to adapt to the new consent preferences.
## Consent Mode (Google tags)
The tag we will be using to update our consent variables is Consent Mode (Google tags) made by Simo Ahava. Head to the tags section, and click on New. In the Tag Type, click on Discover more tag types in the Community Template Gallery. Use the search functionalily to find the right tag and click on Add to workspace. Once the tag has been added, it's time to configure it. The first step is to rename the tag. It's suggested that you give a distinctive name. The second step is to change the Consent Command to Update since that's the purpose of tag. The third step to map the different variables to their respective consent. Google Tag Manager has 4 consent types (read more about them in [consent types](https://support.google.com/tagmanager/answer/10718549?hl=en)):
- Advertising
- Analytics
- Personalization
- Functionality
- Security
It is important to map the right variables to the right cosent types to make sure that no expected behaviour arises. That being said, make sure to read Google's official documentation on the consent types to make sure you have a firm grabs over the available options and their meaning. Once the mapping is completed, the next step is to configure the tag's trigger. Add the trigger, name it and select the Initialization as trigger type. This will ensure that every time the our tag designed to update our consent variables fires before any other tag would. Save the trigger as well as the tag, and it is time to preview the workspace to make sure that our changes are effective. Before doing that, delete the cookieyes-cookie to make sure that the old consent preferences are not interfering. For our testing scenario, we will deny all cookies at first, and the accept the analytics cookies. Remember, the goal at this point is to see if our variables are updating correctly.
When the debugging window loads and you the consent banner loads, make sure to reject all cookies. Time to check the variables. From the left hand side, select the event Initialization, select the Variables tab and search for the consent variable. The next step is to update the consent to see if we are able to capture it. To do so, click on the cookie settings button, toggle the Analytics cookies on and click on Save My Preferences. Next, reload the page (we'll get into this at a later stage). Once the page has loaded, check the new Initialization event and look at the consent variables. If you are able to see something similar to this then your implementation is correct. The next step is to simply run other test scenarios where you accept and reject different consent types to make sure everything is behaving according to plan. Once you have confirmed that all variables are updating correcrtly, it's time to activate the Consent Mode.
**Please remember to refresh the page after updating your consent preferences.**
## Consent Mode Activation
Since we have our consent variables ready and mapped to the different consent types, it is time to use them to inform Google Tag Manager how to trigger our tags in accordance with the users' consent preferences.To enable this feature in your container:
1. In Tag Manager, click Admin > Container Settings.
2. Under Additional Settings, select Enable consent overview.
Once this setting is turned on, in the Tags section, you should be able to see a new shield-looking icon next to the New button. Click the Consent Overview icon to open the Consent Overview page. You should notice two sections:
- Consent Not Configured: contains all the tags where consent has not been configured
- Consent Configured: contains all the tags where consent has been configured
## Tag Consent Configuration
There are two ways to configure consent for tags, one by one or in bulk. We'll discuss both methods, but feel free to choose the most suitable one for your ends.
## Tag Consent Configuration - Individual
To configure consent for an individual tag, select the tag in question and in the tag configuration section, scroll down to Consent Settings and expand the dropdown section. You will notice two sections:
- Built-in Consent Checks: this tag checks for the status of all consent types listed below. Tags with built-in consent checks typically modify their behavior based on the consent granted.
- Additional Consent Checks: - Not set - No additional consent required: select this option to indicate that your tag does not need to check for additional consent in order to fire. You may choose to use this option to distinguish tags that you have decided need no additional consent from tags that you have not yet reviewed. - Require additional consent for tag to fire:This tag will only fire if the status of all of the specified consent types is 'granted' when the tag is triggered.
It is important to note that there is a difference between choosing No additional consent is required and Require additional consent for tag to fire. The difference is essentially what is referred to as cookieless pings. You can read more about those [here](https://support.google.com/analytics/answer/9976101?hl=en). For our set up we will set up our tags to required additional consent before firing.
## Tag Consent Configuration - Bulk
This is the option you should probably use if your container has a lot of tags that you would need to configure consent for. To configure consent in bulk, click on the Consent Overview Icon to open the Consent Overview page. Next, select the tags that should have a similar consent type and click on the Edit Consent Settings button (next to the search icon). This will open a popup containing the same configuration settings you saw when configuring the consent on an individual tag. As mentioned above, we will set our tags to required additional consent.
## Testing the consent configuration
Once you have configured the consent for your tags, it is time to test it to make sure that everything is working correctly. Again, delete the cookieyes-consent cookie before starting to make sure the previous settings are not interfering with your tests. Preview your workspace, and begin the test. For the initial test, refuse both advertising and analytics tags and interact with buttons or link being tracked to see if they are firing. You can even check if the Google Analytics 4 Configuration Tag has fired or not. The short answer is no. Since we refused both analytics and advertising, the configuration tag (and all other GA4 related events should not be firing).
When you test other events related to both the analytics consent type as well as advertising consent type, you should see the tags under the Tags Blocked by Consent Settings tab. The next step is to update your configuration settings to allow all tracking. This time do not reload the page. Try to click on some CTA or links, are the tags firing? Are they still being blocked? Yes, they are. And this should be the last piece of the puzzle to have everything running smoothly.
## Updating Consent Outside Page Loads - CookieYes Support GCM
So far, whenever we wanted the updated consent to enter in effect, we had the update the page. This means that between the consent preferences update and the second, the actions of the user will be tracked even when they are not supposed to, or they will be not tracked even if they are supposed to.
There are two ways we can solve this issue. The first one is to force the page to load whenever consent has been updated. Remember that we are updating our consent variables on initialization, but we need to page to load or reload for this update to happen. And by forcing the update, you will always ensure that your consent variables are up to date with the user's preferences.
The second option is to take advantage of the CookieYes Support GCM option. This option, when turned on, will send a dataLayer event that we can use to update our variables using the Consent Mode tag. To do this, follow these steps:
- Log into your CookieYes account
- Click on Site Settings in the navigational menu
- In the Google cosent mode (GCM) section, toggle on the Support GCM option
That's it! It's that easy. Now, it is time to take this new setup for a test spin. Go back to Google Tag Manager and preview your workspace. Click on the Cookie Settings button, and update your consent preferences, and head to the GTM debugging window. Notice anything different? There is now a new event pushed into the dataLayer: cookie_consent_update.
```js
dataLayer.push({event: "cookie_consent_update", gtm.uniqueEventId: 167})
```
So now that this event is being logged into the dataLayer, we can use it to update our consent variables every time the user is updating their preferences. To do so, we will need to make sure that our Consent Mode tag is firing on both the initialization of the page and the cookie_consent_update event. To do this, head to Google Tag Manager, select Consent Mode tag, click on the Triggering section and finally click on the + button to create a new trigger. In the Choose trigger window, click on the + button to create a new trigger and choose Custom Event as the trigger type. In the event name input field, type in cookie_consent_update. Name the tigger and save it. Now the Consent Mode tag should have to triggers.
It's time to test the implementation. It's the same drill. Preview the workspace, choose your consent, make sure nothing fires if it is not supposed to. Then, update the consent preferences and interact with the page without navigating away at first to make sure that the new consent is in place.
If everything is working according to plan, congratulations! You have successfully implemented the Consent Mode on Google Tag Manager and your tags are now triggering accoriding to users' consent preferences.