You can use Google Tag Manager (GTM) as a custom pixel to manage your third-party pixels.
When you're ready to test your custom pixel, you can use Google Tag Assistant Legacy Chrome extension to test your custom pixels. Google Tag Assistant doesn't work with custom pixels.
Before you create a custom pixel using Google Tag Manager, review the following information to make sure that you understand how to configure your pixel:
Below is an example of subscribing to the standard “product_viewed” event, which indicates when someone views a product. When the event triggers, it pushes the event to the dataLayer.
In this example, the product title is being passed in the event payload. You can use a Google Tag Manager variable to capture the product title from the event payload in your tag of choice.
Example Google Tag Manager custom pixel
The example below is a simplified version of a Google Tag Manager custom pixel that displays how to send data to Google Tag Manager. To push more events to your dataLayer, you can subscribe to more standard and custom events.
Configure Google Tag Manager to accept events from your Custom Pixel
After you create your custom pixel, you need to configure Google Tag Manager to accept events from your custom pixel. To do this, you need a tag, a trigger, and dataLayer variables in Google Tag Manager.
Some examples of select standard customer events and their Google Tag Manager equivalents are listed in the following table:
List of standard Shopify customer events to use with pixels, compared to their equivalent customer events in Google Tag Manager, plus the trigger required for the events to fire.
GTM tag event parameters need to match expected naming conventions in order for your custom pixel dataLayer events to be processed.
Some examples of select custom pixel dataLayer event properties and their equivalent Google Analytics 4 (GA4) event parameters are as follows:
List of custom pixel dataLayer events using the GA4 naming convention
Custom pixel dataLayer events
GA4 event parameters
event.data?.checkout?.currencyCode
currency
event.data?.checkout?.totalPrice?.amount
value
event.data?.checkout?.order?.id
transaction_id
event.data?.checkout?.discountAllocations
coupon
event.data?.checkout?.shippingLine?.price?.amount
shipping
event.data?.checkout?.totalTax
tax
event.data?.checkout?.lineItems
items
Here's an example using the following checkout_completed event:
The Google Tag Manager trigger is a custom event type with the event name of checkout_completed. The Event name field in the trigger must match the event key in your custom pixel.
orderId and currency are the variables that you use in Google Tag Manager to capture the data from the event. They can be mapped to a dataLayer variable in Google Tag Manager. Each event variable requires its own dataLayer variable. Set the trigger to fire on all custom events.
Create a tag that uses the trigger you just created. Under event parameters, add the variables that you want to capture. In the example above, orderId, currency, price, shippingLine and totalTax would be set up as dataLayer variables. Each time the tag fires, it will capture these dataLayer variables with the event.
Note that at least one tag and trigger must be set up in Google Tag Manager for data transfer to occur.
Replacing old dataLayer.push(event) calls with analytics.publish()
If you've previously set up Google Tag Manager, then you need to replace your dataLayer.push calls with Shopify.analytics.publish()calls. You can find your dataLayer.push calls in your theme.liquid files, in the Layout section of your theme editor.
You also need to replace the dataLayer.push calls in the checkout.liquid. However, because checkout.liquidisn't compatible with checkout extensibility, you need to use a UI extension to push data to web pixels.
Below is a simplified example of a custom email sign up event being tracked using dataLayer in theme.liquid files.
The Shopify equivalent displays in this way, which pushes the data into your custom pixel.
Then, in your custom pixel code you would add something such as this.
Replace old dataLayer.push(data)
Google Tag Manager has a feature that lets you push a stateful dataLayer object on every event. While Shopify's pixel sandbox doesn't include an equivalent feature, you can achieve the same outcome by creating your own data object and passing it into custom events.
For example, define a “customData” object, before any of your custom events are published.
Then, whenever you want to include your custom data, pass it into your publish method.
Tips for setting up Google Analytics 4
Consider the following tips for setting up Google Analytics 4 (GA4) when using Google Tag Manager as a custom pixel.
Cleaner page URLs
When GA4 is running in a sandbox, you might notice that the page URLs include information about the sandbox it's operating in. If you want to remove the sandbox information from those URLs, then you can turn off GA4’s automatic pages tracking, and instead implement your own, by using the standard page_viewed event.
After you publish your own event to dataLayer, you can create a GA4 page_view tag that triggers on the page_viewed event. Most commonly, you can use the Google Analytics: GA4 Event tag type, and set the Event Name to page_view. After you set the tag type and event name, you should add a parameter for page_location and set the value to the same value that you've passed into your dataLayer from your custom pixel.
Enhanced measurement
When loading GA4 inside of Shopify's pixel sandbox, some events that are normally automatically inferred will need to be set up manually. For example, outbound link clicks, as part of GA4’s Enhanced measurement setting, can't be triggered automatically for security reasons when using custom pixels. However, it's possible to implement GA4’s enhanced measurement events yourself as custom events.
The code provided below includes a simplified example of tracking outbound link clicks.
Finally, in GTM, create a GA4 tag that sends the link click to GA4, by ensuring the event name is click, to match GA4’s enhanced event naming.
You can achieve the same tracking for any of Google’s enhanced measurement metrics.
Navigate to your site, and then trigger the events that you want to test.
In the extension, click the on the Google Tag Manager tag. The Data Layer section should display the payload of the event that was triggered.
Any other tags that are loaded by Google Tag Manager are also listed in the extension. You can click these tags to review the data that was sent to them.
Can’t find the answers you’re looking for? We’re here to help.