Follow me on LinkedIn - AI, GA4, BigQuery

In this article, you will learn to set up enhanced conversions for Web using Code configuration in Google Tag Manager.

Prerequisite 

  • You have an active Google Ads Conversion Tag
  • You have an  active Conversion Linker Tag
  • First-party customer data is available (email, full name, home address, or phone number) on the page where your conversion tracking tag fires.

There are 3 ways in which you can implement enhanced conversions in Google Tag Manager. You only need to choose one option to collect user-provided data.

  1. Automatic Collection
  2. Manual Configuration (Using CSS Selectors)
  3. Code Configuration

In this article, we are going to use the Code Configuration. 

This process will consist of 6 major steps as below

  1. Configure Google tag settings
  2. Enable enhanced conversions for Web in Google Ads
  3. Capture user data using custom Javascript in Google Tag Manager
  4. Create User-Provided Data variable in Googe Tag Manager
  5. Update Google Ads Conversion tag in Google Tag Manager
  6. Verify and Publish your Changes

1. Configure Google tag settings

Before you can set up enhanced conversions for the Web, you will need to adjust your Google tag: 

Follow the below steps.

Step-1: Navigate to the Google Analytics 4 Admin and click on “Data streams”.

click on Data streams 1

Step-2: Select your GA4 property.

select your GA4 property

Step-3: Click on the “Configure tag settings”. 

Configure tag settings 1

Step-4: In the Configure tag settings, click “Manage automatic event detection”.

Manage automatic event detection 1

 Step5: Enable automatic collection for “Form interactions” by clicking on the toggle button to “ON”

Enable automatic collection for Form interactions

2. Enable enhanced conversions for Web in Google Ads

Now, the next step in setting up the enhanced conversion for the web using the Google Tag Manager will be to enable the enhanced conversions for the web in Google Ads. 

For existing conversion actions.

Follow the below steps

Step-1: Navigate to your Google Ads account and click the Goals icon.

Navigate to your Google Ads account

Step-2: Click the ‘Conversions’ drop-down in the section menu.

Conversions drop down

Step-3: Click on the “Settings” tab.

click on the Settings tab

Step-4: Click on “Enhanced conversions”

Click on Enhanced conversions

Step-5: Click on the checkbox ‘turn on enhanced conversions’.

turn on enhanced conversions

Note: When you select Turn on enhanced conversions for web, you’ll need to accept the customer data terms.

Step-6: Select View Terms next to “Customer data terms” and read the “Policies and Additional Terms for Customer Data”.

Step-7: Click the checkbox beside “I have read and accept the terms on behalf of my company”.

Step-8: Click Agree. You’ll notice your status updated as “Accepted”.

Step-9: Under ‘To start, select how you want to set up enhanced conversions’, select ‘Google Tag Manager’.

select ‘Google Tag Manager 1

Step-10: Click on “Save”

click on Save 1

3. Capture user data using custom Javascript in Google Tag Manager

In Google Tag Manager, we’ll build a special JavaScript code (Custom JavaScript Variable) to grab the value from a specific form field when someone submits the form.

This code targets the exact element on the page and provides its input value.

For example, if we capture the form email input field, it will provide the value that was provided in the field like “test@gmail.com”.

Follow the below steps

Step-1: Navigate to the Variable tab in Google Tag Manager.

Navigate to the Variable tab in Google Tag Manager 1

Step-2: Under “User-Defined Variables”, click on New Variable.

Under User Defined Variables click on New Variable

Step-3: Name the variable and click on the “Variable configuration”

click on the Variable configuration

Step-4: Select the “Custom JavaScript” as a variable type.

select the Custom JavaScript as a variable type

Step-5: Add the following javascript code 

1

2

3

4

5

6

7

8

9

10

11

12

13

function () {

 

    var country = document.getElementById('[name="your_email_field_name"]').value;

 

    if (country)

 

        return country;

 

    else 

 

        return "Country not selected";  

 

}

Note: Replace [name=”your_email_field_name”] with the actual name or ID selector of your email input field.

custom javascript google tag manager

Step-6: Click on Save.

Step-7: Enter Preview mode in GTM to test the setup. This allows you to see in real-time how the variable gets the field value.

Enter Preview mode in GTM 1

Step-8: Go to the form page and add any dummy email id to the input field.

add any dummy email id to the input field

In the Tag Assistant tab, you should see the variable that we created earlier is populated with the dummy value entered in the field.

see the variable that we created earlier is populated with the dummy

Note: If your form has other details (e.g., first name, last name, phone number) you can repeat the same steps and create the other variable in Google Tag Manager. 

4. Create User-Provided Data variable in Googe Tag Manager

To create a new User-Provided Data variable in GTM, follow the below steps

Step-1: Navigate to the Variables tab in Google Tag Manager.

Variables tab in Google Tag Manager

Step-2: Under “User-Defined Variables”, click on New Variable.

User Defined Variables 1

Step-3: Name the variable and click on the “Variable configuration”

Name the variable

Step-4: Select the variable type as “User-Provided Data”.

Select the variable type as User Provided Data

Step-5: Name the Variable and click on “Code configuration”.

click on Code configuration

Step-6: Click on the drop-down under “Data source” and select the new variable.

click on the drop down under Data source

Step-7: Name the variable as “User Data” and click on “Variable Configuration”

Name the variable as User Data

Step-8: Select the variable type as “Custom Javascript”

select the variable type as Custom Javascript

Step-9: Copy the following code into the custom Javascript variable:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

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

 

}

 

}

 

}

For Example, earlier, we created the custom javascript variable as “User Email ID”.

Post providing the correct reference, the code line will look similar to below

1

2

3

4

5

function () {

 

return {

 

“email”: {{User Email ID}}

custom javascript variable

Step-10: Repeat the “Step-10” if you have other user related data.

Step-11: Save the variable, and then you will be redirected to the “User Provided Data” variable screen like below

user provided data

Step-12: Save this variable as well.

5. Update the Google Ads Conversion tag in Google Tag Manager

The next step is to update the existing Google Ads Conversion tag in Google Tag Manager. 

Follow the below steps:

Step-1: Open Google Tag Manager.

Step-2: In your “Workspace”, click Tags from the navigation menu.

In your Workspace click Tags from the navigation menu

Stpe-3: Find and click on the existing Google Ads Conversion tag. 

Find and click on the existing Google Ads Conversion tag

Note: 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.

Step-4:  In tag configuration, click on the checkbox saying “Include user-provided data from your website”.

Include user provided data from your website

Step-5: Under the “User-provided data” drop-down, select the User-Provided Data variable that we created earlier.

select the User Provided Data variable that we created earlier

Step-10: Save the Tag

Verify your setup and publish your tag.

Before you publish your container, make sure that the tag behaves as intended using Preview mode.

If you are familiar with networking and hashing algorithms, you can also validate user data hashing.

6. Verify and Publish your Changes

To validate your setup with Preview mode, follow these steps:

Step-1: In your Tag Manager workspace, click the Preview button at the top. A new tab opens with Tag Assistant.

click the Preview button at the top 1

Step-2: Enter your website’s URL in Tag Assistant. Tag Assistant opens your website and the Tag Assistant summary. Keep both tabs open.

Enter your websites URL in Tag Assistant 1

Step-3: On your website, fill out your form and click on “Submit”.

On your website fill out your form and click on Submit

Step-4: Check the “Tag Assistant” summary. Your Google Ads Conversion tag should be listed under the “Tags Fired” section in the summary.

Check the Tag Assistant summary 1

If your tag is listed under “Tags Not Fired”, you need to adjust the tag’s trigger settings.

Step-5: Click on the tag to see which values were passed to the tag. Check if your input was received. 

see which values were passed to the tag

If the tag did not receive any input: Verify your implementation method

Step-6: Publish the workspace in Google Tag Manager.

Validate user data hashing using network calls

To validate that user data is submitted hashed using Google Chrome, follow these steps:

Step-1: Open your website and navigate to the form field you want to validate.

Step-2: Open the developer tools by right-clicking on the web page and select “inspect”

Open the developer tools 1

Step-3: Click on the “Network” Tab.

Click on the Network Tab 1

Step-4: Click on the checkbox “Preserve log” and Disble cache”.

click on the checkbox Preserve log and Disble cache 1

To make validation easier, clear any pre-existing network logs. By clicking on the clear button

To make validation easier clear any pre existing network logs

Step-5: Type “https://google.com/pagead” in the Filter box

in the Filter

Step-6: With your Network tab in the developer tools open, submit the data to the form field that you want to validate.

Result:

You should see a request sent to https://google.com/pagead/form-data/ with a page parameter em=xyz.

The em parameter contains the hashed user data.

Here the the em parameter is highlighted in “Yellow”

The em parameter contains the hashed user data 1

What hashed data looks like

Suppose a user entered a raw email address (abc@example.com) in the form:

  • If the Google Ads User-Provided Data Event tag receives the raw user data. Then the user data will be hashed by the tag using web-safe Base64 encoded SHA256 by default just like the yellow highlighted part in the above image.
  • If you pre-hash user data before making it available to the Google Ads User-Provided Data Event tag, use Hex-encoded SHA256.

Once your tag collects the data parameters you need, Submit your changes in Tag Manager.

Congratulations!!!

You have successfully set up enhanced conversions for web using code configuration in GTM.

  1. Google Analytics 4 Channels, Source and Medium explained.
  2. Path exploration report in GA4 (Google Analytics 4) – Path analysis.
  3. How to use Microsoft Clarity with GA4 (Google Analytics 4).
  4. GA4 vs GA4 360 – Pricing, Limits, Billing and more.
  5. Setup Enhanced Conversions for Leads using Data Layer in Google Tag Manager.
  6. Self-referral Google Analytics 4 – Referral exclusion GA4.
  7. GA4 Attribution Paths (Conversion Paths) Report.
  8. Google Tag Manager Tutorial.
  9. GA4 Attribution Models Explained: How to Choose the Right One.
  10. Looker Studio (Google Data Studio) Tutorial.
  11. Google Tag Manager Data Layer Tutorial with Examples.
  12. Set up enhanced conversions for Web using ‘Code’ in Google Tag Manager.
  13. How to create Google Ads report in Google Analytics 4.
  14. Google Tag Manager Audit Checklist.
  15. Tracking Site Search in Google Analytics 4.
  16. How to see Organic Search Keywords in Google Analytics 4.