How to set-up Google Enhanced Conversions using CSS Selectors | Articles

We already explained in previous articles how to improve conversion tracking with Google Enhanced Conversions and how to set-up Google Enhanced Conversions in GTM. In this article, we’ll explain how to retrieve existing unhashed user-provided data variables in your data layer using CSS Selectors.

Identify Enhanced Conversions CSS Selectors and input into Google Tag Manager

To identify the CSS Selectors to input into the enhanced conversion tag fields (for example, email, phone, etc.), please follow these steps. Note that you will need to have access to a staging website or any way to make a fake conversion on the website.

If you already have unhashed variables in your data layer, you can select those instead of creating new CSS variables. If you aren’t sure, ask you client’s developers or continue through the instructions:

1. Navigate to your conversion page.

2. On your conversion page, you will have to find the corresponding customer data you want to send with enhanced conversions. In my case, I want to find the email address. I thus had to go through the whole purchase process, right up to the confirmation page where a summary of my order appeared and where my email address was given

custo info3. Use your mouse to right-click on top of it and select Inspect. For example, if you are trying to capture an email address, make sure you are right clicking the email address (e.g. This email address is being protected from spambots. You need JavaScript enabled to view it.) displayed on your conversion page.

4. You will see the Chrome Developer Tools launch within your Chrome browser.

chrome developper

5. Within the source code presented in the Chrome Developer Tools page, you will see a portion of the code highlighted. This highlighted code is the page element where you need to extract CSS Selectors for the customer data you right-clicked in Step 3 of this section.

6. Hover your mouse over the highlighted code and right-click it.

7. Scroll down to Copy, then choose Copy Selector.

copy selector

8. In your Google Tag Manager, create a new variable. In the “Choose Variable Type” screen, select DOM Element.

variable type

9. On the “Variable Configuration” screen, change “Selection Method” in the dropdown to “CSS Selector.”

variable config

10. Enter the CSS selector that references your users’ data into the “Element ID” input field. For reference, it should look something similar to but not exactly like this:

body > div.content > div > div.main > div.main__content > div.step > div.step__sections > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(1) > div > p:nth-child(2) > bdo

11. Click Save.

12. Repeat steps 2-8 of this section for each different piece of customer data you want (for example, email, name and address, etc.), by copying the CSS Selector into a new variable for each customer data variable in Google Tag Manager.

13. In Google Tag Manager, click Save.

How to debug your setup

In this article we explain how to verify your Google Enhanced Conversions implementation in Google Ads and using the Tag Assistant.


publication auteur Eliott Pousset
AUTHOR
Eliott Pousset

| LinkedinThis email address is being protected from spambots. You need JavaScript enabled to view it.

Tags:

Get in touch

Semetis | Rue de l'Escaut 122, 1080 Brussels - Belgium

welcome@semetis.com

Connect with us

Cookie Policy

This website uses cookies that are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy. By accepting this OR scrolling this page OR continuing to browse, you agree to our privacy policy.