Parametric Pixels in Google Tag Manager

Every so often, we get approached by a client with a large, multinational website or Software-as-a-Service app hosted on one domain and tagged in one Google Tag Manager container whose AdOps teams need hundreds of Meta pixels, Floodlight counters, and/or Google Ads tags to be live on their digital properties — and require help to fire them in a sensible way.

It’s a multi-faceted problem. Adding a few media pixels or conversion tags to a GTM container is easy, but adding a few hundred can be surprisingly hard. Custom HTML tags can quickly add up to the container’s 200 kb size limit, and a container crammed with built-in conversion tags and the triggers to fire them can significantly slow down a website.

Loading speed is essential. Amazon, as reported by Fast Company, has calculated that slowing down its pages by one second could cost it a whopping $1.6 billion dollars per year. And, since Google’s Page Experience Update, page speed can have an impact on how a website ranks in Google.

The solution is parametric pixels, or media pixels and conversion tags that deploy parametrically based on URL patterns, client-side events, or users’ actions.

Parametric Meta Pixels

Suppose you have a landing page for a campaign in 10 countries. Each country has its own AdOps team, and every AdOps team wants to capture a page view as a conversion event in its own Meta base pixel.

Here’s what the campaign’s pixel requirements would look like:

URL Pixel ID 0000000001 0000000002 0000000003
(…) (…) 0000000010
Example pixel requirements

Instead of deploying ten Custom HTML tags for the ten base pixels, which would make the GTM container heavy and adversely affect the website’s speed, you can create a parametric pixel.

Step 1: Add a Custom HTML tag with a variable pixel ID

Go to the “Tags” tab in your GTM container’s workspace and add a Custom HTML tag with the following HTML code (add it without a trigger for the time being):

<!-- Facebook Pixel Code -->
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  fbq('init', '{{Parametric - Meta Pixel - RegEx Table}}');
  fbq('track', 'PageView');
  <img height="1" width="1" style="display:none" 
       src="{{Parametric - Meta Pixel - RegEx Table}}&ev=PageView&noscript=1"/>
<!-- End Facebook Pixel Code -->

Notice the HTML code for this pixel. It’s almost entirely the same as a regular Meta base pixel. However, instead of a hardcoded pixel ID, the Custom HTML tag takes the pixel ID from the {{Meta Pixel ID}} Google Tag Manager variable.

This one change allows you to trigger the pixel as many times as necessary — and with as many IDs as necessary — on the frontend. You can have a hundred base pixels with different IDs if you want to, and yet you only need one Custom HTML tag!

Step 2: Store the pixel IDs in a RegEx table

Go to the “Variables” tab in your GTM container’s workspace.

Create a new RegEx Table variable and:

  • Set {{Page URL}} as the input variable
  • For each Meta base pixel:
    • Match the URL pattern with a regular expression in the “Pattern” field
    • Add the pixel ID as the value of the “Output” field
  • Tick the “Set Default Value” checkbox and assign a default value of false

Here’s a screenshot:

The RegEx table for your parametric pixel

What did we just do here?

If the URL requires a pixel, the RegEx table variable will return the value of that pixel’s ID. If no pixel is required, it will return a value of false.

Step 3: Create a parametric trigger

Go to the “Triggers” tab in your GTM container’s workspace.

Create a new Page View trigger and:

  • Set “This trigger fires on” to “Some Page Views”
  • Fire this trigger when {{Parametric - Meta Pixel - RegEx Table}} does not equal false
The trigger for your parametric pixel

This is it!

Here’s the flow that you just enabled:

Parametric pixel flow

You can now test your parametric pixel out in Google Tag Manager’s Preview mode.

Adapting This to Your Needs

You can adapt this approach to your needs as necessary.

For example, you could reuse this approach to fire Floodlight counters or Google Ads tags parametrically. Simply feed a variable instead of a value in the built-in Google Tag Manager tags for this purpose, then store their values in a RegEx table.

The sky’s the limit. You could even store the IDs in your CMS and push them as a data layer event or JavaScript variable, then ingest it through Google Tag Manager instead of storing it in RegEx tables. You could also extend this to user actions using click listeners or onclick events.

As always, if you need our help, scroll down to see our contacts and don’t hesitate to get in touch!