How to set up Advanced Matching for Meta using Google Tag Manager

Advanced Matching is a great way of optimising your Paid Social Ads. By providing the Meta pixel with more event data, it improves conversion attribution, increases your custom audience size, and helps to reduce your cost per conversion. While you can opt for an automatic implementation, we find setting up Advanced Matching manually is often the most accurate way to tailor to your site. So, how do you do it manually?

Like many tracking practices, there are lots of ways to achieve it. A client of ours needed this setup using Google Tag Manager, a tool many prefer to use due to its accessibility, easy testing capabilities, and the eliminated need for coding. However, they noticed that there weren’t a lot of instructions on how to set Advanced Matching in this way, and those that did exist were not easily adjustable for other site setups. So we wrote some! 

Summary

• Step 1: Find a form on your site and create a Custom JavaScript variable per form field.
• Step 2: Create corresponding Data Layer variables for these fields.
• Step 3: Create the Data Layer ‘Listener’ tag, designed to fire when your form is filled in, to capture relevant data.
• Step 4: Build a Data Layer ‘Persistor’ tag to ensure this data remains for the rest of the session, particularly through the checkout journey.
• Step 5: Populate your Meta event tags, your Advanced Matching values as parameters.

Step 1: Create Custom JavaScript Variables for form inputs

Firstly, in GTM, you should create one Custom JS variable per form field. A key function of this step is to standardise data for when it’s sent to Meta.

Each site’s checkout or form will have different input selectors, so you should update the document.querySelector('#...') IDs accordingly. For example, some of the fields are specific to Craft CMS (i.e. City is called Locality and State is called Administrative Area). 

You can confirm your site’s selectors using the browser inspector (Right Click → Inspect) and searching for the relevant fields. We’ve clearly marked the elements you need to change, based on your values:

Step 2: Create Data Layer Variables

Now that you’ve done that, you will need to create some variables to populate the dataLayer. For each Custom JS variable above, create a Data Layer Variable in GTM, using the same naming format for consistency. These will be used to identify key data required for Advanced Matching.

• field_email 
  > Data Layer Variable Name: applicationData.email
• field_firstName
  > Data Layer Variable Name: applicationData.firstName
• field_lastName
  > Data Layer Variable Name: applicationData.lastName
• field_phone
  > Data Layer Variable Name: applicationData.phoneNumber
• field_city
  > Data Layer Variable Name: applicationData.addressCity
• field_state
  > Data Layer Variable Name: applicationData.addressState
• field_postalCode
  > Data Layer Variable Name: applicationData.addressPostalCode
• field_street
  > Data Layer Variable Name: applicationData.addressStreet

Again, your form will likely contain different fields and will possibly have fewer or more variables to track.

Step 3: Create the DataLayer ‘Listener’ Tag

This Custom HTML tag captures the values found in your form, ready to be pushed to the dataLayer. It’s important to only trigger this tag by an event where all the fields exist. Contact and checkout form submissions are great examples.

It should be noted that this tag is only designed to capture these values; the next tag is designed to keep them in the dataLayer. We recommend using a Trigger Group to fire this tag as late as possible, ensuring it fires after any possible form submission. 

Make sure this tag is compliant with Google Consent Mode by adding an additional consent check for ‘ad_storage’.

Step 4: Add the Data Layer ‘Persistor’ Tag

Include this Custom HTML tag on all pages. Its job is to save applicationData to localStorage and automatically backfill it into the dataLayer on future pages in session, most commonly as part of a purchase journey. This means the dataLayer will be populated on pages that don’t contain the original form fields.

Like the Listener tag, this also needs an ‘ad_storage’ consent check to ensure that user data privacy is respected.

Step 5: Update your Meta Event tags

Now that the values can populate the dataLayer, you need to send the data to Meta and improve your conversion tracking. Using a Facebook Pixel tag from a community template, like the one from ‘facebookincubator’, tick the option to Enable Advanced Matching. From there, simply populate each parameter name with its corresponding parameter value. Remember, you need to select the Data Layer Variable of each field, not the JS version!

This setup ensures Advanced Matching values are captured once, then persisted through the full user journey. This way, your Meta Pixel (and other platforms) always receive consistent data, regardless of how long the checkout journey.

This is a tech-heavy blog, so bravo if you’ve made it this far! Processes like this take a lot of effort to build and get familiar with. Luckily, we have a dedicated team of experts ready to help you. If you need help with your tracking and analytics, get in touch.