What is “Shopify Pixels”?
What is “Shopify Customer Events”?
Code Overview: Example Pixel
Set up GA4 E-commerce using Shopify Pixels
Conv & Risk
Shopify Customer Events Practice: Facebook Pixels
FAQ
Last update: 22 June, 2023
It has always been challenging to manage tracking & marketing pixels for Shopify merchants. Shopify has released a galvanizing update that is set to become a game changer in how we manage and collecting and sharing data: Shopify Customer Events.
Shopify Pixels is the core feature of Shopify Customer Events. It is designed to add an extra edge to your overall tracking experience, making life easier when setting up the right tools to monitor how customers engage with your business.
Now, let’s delve into it all and find valuable answers to your most popular questions:
Excited already? You’ll also get your hands on a step-by-step approach to “Setting Up Google Analytics 4 using Shopify’s New Pixels Feature” if you’d like to try and test it.
We recommend refraining from taking any action at this point since most of the features, including app pixels, are still in a sandbox environment and are not yet available for use. It's best to allow the Analyzify team and other professionals in the field some time to test, experiment, and gather data from initial tests.
Here is a brief overview of what Shopify Customer Events offers and how you should respond:
Basically, pixels are code snippets (mostly Javascript) that transfer the user-behavior data from your Shopify store to 3rd parties for marketing and reporting. The most popular pixels can be listed as Facebook Pixel, Google Analytics, Google Ads, Tiktok, etc. Shopify says,
“Pixels collect and pass behavioral customer data for marketing and reporting.”
With Shopify Pixels:
Let’s admit that it was never easy to manage the pixels for Shopify merchants. However, Analyzify users have been quite happy with our service as they’ve always had professional & expert support. Now, it is set to become even more accessible & more stable than ever with an enhanced instrument.
We have helped more than 1500 Shopify merchants with their data analytics setup.
Yet, we should admit that it was challenging even for us to catch up with the pixel updates because the market is so dynamic as it depends on 3rd parties. Here is a quick look at what’s happened only in the last few years:
All these updates have a direct effect on e-commerce businesses because most Shopify merchants heavily rely on the performance of the Ads. And, of course, this performance depends on the data the Ads platform receives. That’s why Facebook Ads were not profitable & useful for many merchants following the iOS 14.5 changes.
Shopify Pixels API and Shopify Customer Events feature will make managing pixels more stable as it will all be managed directly from the Shopify API (back-end).
Let’s picture it with a clear example:
You are running an affiliate program, and they provide you with a code block, asking you to add this code into Shopify Checkout Additional Scripts and ensure it works. This is a 3rd party script, and you can never know which data is being taken under which condition. Even worse, your theme files & checkout scripts become too messy in time; you have 10s of pixels, and you don’t even know which one is still active and should be there. This is both a privacy issue – and a business risk.
Even if you add an open-source code like Analyzify’s open-source Shopify data layers for Shopify; it is still hard to manage. There are 10s of lines of codes only that try to:
And it is executed when someone completes an order and views the thank you page. Simply put, the old method brings about too much work.
With Shopify Customer Events & Pixels; you will just add a Pixel through your Shopify admin panel and set the conditions on when this pixel should be triggered. You can also attach the data pieces (such as order details) easily.
You will discover more details in the section below.
Shopify Customer Events provides you with a set of features to add, change, and manage custom pixels from a single location: your Shopify admin.
So, you won’t have to tinker with codes to sustain reliability and accuracy when integrating third-party services to track customer behaviour.
As Shopify states:
“Customer events are actions taken by your customers that can help you understand how your customers engage with your business. Third-party services integrated with your store use the customer event data they collect using pixels to optimize your marketing automation and analytics.”
This way, you can:
Without needing to inject code blocks into your Shopify themes, which will also provide more accurate results.
By tracking customer events, such as those listed below, you can gain valuable insights into customer behavior and preferences easily.
Here are the 5 pre-checkout customer events that you can track with web pixel:
In addition to them, web pixel allows you to track the following checkout events:
With Shopify web pixel, you can monitor these events without having to modify any sort of code or additional Javascript.
Let’s have a quick overview of an example code snippet from Shopify’s Customer Events section and understand how it performs better.
Section 1: This is the code block that’s given by the 3rd party. In this example, it is Facebook Pixel (aka Meta Pixel).
Section 2: This sends the PageView event to Facebook Pixel when a page is viewed. 2a here is where the magic happens. This code “analytics.subscribe("page_viewed", event =>” – is Shopify’s new investigation. That’ll trigger the code block in 2b when the specific condition is met.
Section 3: And here, we are not only pushing the event but also attaching additional data. In this example, 3a is the push event and adds the data pieces in 3b. It simply sends the product level data (Content ID, Name, Price, etc) along with this event.
This is the most exciting part: We will achieve the result without using data layers, Google Tag Manager, or any 3rd party app. We will only use Analyzify’s open-source GA4 Shopify Pixel and Shopify’s new feature Shopify Pixels.
Shopify Google Analytics 4 E-commerce setup on Shopify includes:
Event Name | Triggers on/when | Attached metrics |
---|---|---|
Page view | Each page view | Page title, page language |
Search | A site search is performed | Search query |
Product view | A product is viewed | Product ID, Product Name, Product Price |
Add to cart | A product is added to the cart | Product ID, Product Name, Product Price |
Begin checkout | Checkout process started | Currency, value, line items (products) |
Add payment info | Payment info (credit card, etc) is added | Currency, value, line items (products) |
Purchase | Purchase completed | Currency, value, line items (products) |
After this setup, you will have all e-commerce data on your Google Analytics 4 account flowing from your Shopify store.
We do not recommend using this as your primary reporting channel because “Shopify Pixels” is still under development and it has some limitations. You can use a new GA4 property for testing purposes. Shopify strongly advises using an app like Analyzify or seeking assistance from an expert.
Please read the sections above carefully before taking any action on your store. This is an open-source solution that’s prepared by the Analyzify team. Analyzify or Shopify doesn’t provide any support for these features. Consider purchasing Analyzify for the best results. Contact our support team if you are an existing client.
You can follow our in-depth tutorial on Youtube (recommended) or scroll down for the web version.
Visit Shopify Admin > Settings > Customer Events > Add Custom Pixel
Name the new pixel as Analyzify OS – GA4 v1.0. Click Add Pixel.
After hours of deep work and collaboration with many experts, our team has come up with this masterpiece. A perfectly working Shopify GA4 Pixel and we are proud to serve this to the Shopify community.
Just copy the code-block and move on to the next page. View Analyzify Github repository if you want to learn more about the code.
// Analyzify Shopify Pixels - GA4 v1.0 - learn more on https://analyzify.com/shopify-pixels
// DO NOT forget updating G-XXXXXXXXXX with your own GA4 measurement ID - learn more on https://docs.analyzify.com/find-your-google-analytics-tracking-id
const script = document.createElement("script");
script.setAttribute("src", "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX");
script.setAttribute("async", "");
document.head.appendChild(script);
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-XXXXXXXXXX");
// DO NOT forget updating G-XXXXXXXXXX with your own GA4 measurement ID - learn more on https://docs.analyzify.com/find-your-google-analytics-tracking-id
const Analyzify = {
getItemsFromLineItems(lineItems) {
let items = []
for (const item of lineItems) {
items.push({
item_id: item.variant.product.id,
item_name: item.variant.product.title,
})
}
return items
},
getPageViewData(evt) {
let ctx = evt.context
return {
page_location: ctx.document.location.href,
page_title: ctx.document.title,
language: ctx.language,
}
},
getViewItemData(evt) {
return {
currency: evt.data.productVariant.price.currencyCode,
value: evt.data.productVariant.price.amount,
items: [{ item_id: evt.data.productVariant.id, item_name: evt.data.productVariant.product.title }],
}
},
getAddToCartData(evt) {
return {
currency: evt.data.cartLine.merchandise.price.currencyCode,
value: evt.data.cartLine.merchandise.price.amount,
items: [{ item_id: evt.data.cartLine.merchandise.id, item_name: evt.data.cartLine.merchandise.product.title }],
}
},
getPaymentInfoData(evt) {
return {
currency: evt.data.checkout.currencyCode,
value: evt.data.checkout.totalPrice.amount,
items: this.getItemsFromLineItems(evt.data.checkout.lineItems),
}
},
getCheckoutData(evt) {
return {
currency: evt.data.checkout.currencyCode,
value: evt.data.checkout.totalPrice.amount,
items: this.getItemsFromLineItems(evt.data.checkout.lineItems),
}
},
getCheckoutCompletData(evt) {
return {
transaction_id: evt.data.checkout.order.id,
currency: evt.data.checkout.currencyCode,
value: evt.data.checkout.totalPrice.amount,
items: this.getItemsFromLineItems(evt.data.checkout.lineItems),
}
}
}
analytics.subscribe("page_viewed", async (event) => {
gtag("event", "page_view", Analyzify.getPageViewData(event));
});
analytics.subscribe("product_viewed", async (event) => {
gtag("event", "view_item", Analyzify.getViewItemData(event));
});
analytics.subscribe("search_submitted", async (event) => {
gtag("event", "search", {
search_term: event.data.searchResult.query,
});
});
analytics.subscribe("product_added_to_cart", async (event) => {
gtag("event", "add_to_cart", Analyzify.getAddToCartData(event));
});
analytics.subscribe("payment_info_submitted", async (event) => {
gtag("event", "add_payment_info", Analyzify.getPaymentInfoData(event));
});
analytics.subscribe("checkout_started", async (event) => {
gtag("event", "begin_checkout", Analyzify.getCheckoutData(event) );
});
analytics.subscribe("checkout_completed", async (event) => {
gtag("event", "purchase", Analyzify.getCheckoutCompletData(event));
});
We DO NOT recommend using your existing Google Analytics 4 property here. As mentioned above, Shopify Pixels is still in the sandbox and might not work properly. Create a new test property for the best results.
Step 3.1: Go back to your recently added (on Step 1) Shopify Custom Pixel and paste the Analyzify’s Google Analytics 4 Pixel code block.
Step 3.2: Update the G-XXXXXXXX with your own GA4 measurement ID. You can create a new test property using this tutorial. Get help from this tutorial if you don’t know how to find your own Google Analytics 4 measurement ID.
Step 3.3: Click “SAVE” and make sure the changes are saved with your own GA4 ID. Click here for a detailed video setup.
The Shopify pixels will not start functioning unless you CONNECT them. Click on CONNECT and proceed to the next step for the tests. If you have successfully connected, the button should change to “Disconnect”.
Google Analytics 4 has several different testing methods. We will use the GA4 RealTime view in this tutorial. Make sure to check out the Youtube video if you want to execute an in-depth test using GA4 DebugView.
Step 5.1: In an incognito window, visit your Shopify store. Make sure you don’t have any adblockers or tracker blockers active. Google Chrome is usually the best for these kinds of tests. Visit a couple of pages and leave this page open on your browser.
Step 5.2: Visit your Google Analytics 4 account. Click Left Menu > Reports > Realtime. It might take a couple of minutes for the first data to come in. You should already be seeing yourself as the visitor. If the data is not there yet, make sure to watch the troubleshooting section in our YouTube video.
Step 5.3: Go back to your store and add a couple of products to your cart; then go to your Cart page, and begin the checkout process.
Step 5.4: You should be seeing “page_view, view_item, add-to-cart, add_payment_info, purchase” events in your Real-time reports under the events section. You can click these event names and also check the relevant data.
Real-time reports are excellent for displaying the data flow. However, it’s advisable to wait for a couple of days before fully trusting a data source. You should collect real visitor data and compare it to your GA4 data to make sure that the setup is working properly.
We hope everything went well for you. Before you leave:
This is an open-source solution that’s prepared by the Analyzify team for the Shopify community. Analyzify or Shopify doesn’t provide any support for these features.
Shopify recently released this feature, on October 3. This is a major change – and contains many risks. During our tests, we observed many unstable behaviors in the code. The same code did work in some stores and did not work in another group of stores.
We will dive into the details soon but we do not recommend relying on Shopify Pixels as your main tracking channel at the moment. It is great to experience it; that’s why we are preparing lots of resources for you.
In the meantime, here are the best practices we suggest:
Now, let’s focus on using the cons & risks of Shopify Pixels.
Privacy & Security
Shopify stated Privacy & Security risks on this page. The major highlights are website performance (speed) and GDPR-compliance.
GDPR Compliance
The solution doesn’t seem to be GDPR-compliant yet. Therefore, it contains risks for European stores. It is likely that this will change in the near future.
However, you should be careful with this setup especially if you are in Europe or subject to GDPR laws.
Shopify states: “Compliance with applicable laws, consents, code security, troubleshooting, and updates are your responsibility.”
Sandbox Environment
To avoid potential risks, Shopify made the pixels work in a sandbox environment. We can think of it like an iFrame within your store.
This might cause inconsistency in some events – especially the ones that change the page quickly like Add-to-cart & begin checkout.
Missing metrics/dimensions
Some metrics/dimensions such as Product Brand and User ID are not supported at the moment. That means you can not pass these data pieces into 3rd party channels. A complete e-commerce tracking won’t be possible with Shopify Pixels at the moment.
Missing events
Some important e-commerce events such as Product Click (on collection pages) are not supported either.
Lack of experience & expertise
It’s completely a new world even for many Shopify experts. There isn’t enough data or experience to rely on this method completely yet. We probably need months of data collection to be able to trust this feature completely.
We have prepared another tutorial for you to experience Shopify Pixels with another pixel: Facebook Pixel. Please consider this just as a practice and we do not recommend using as the primary pixel.
The official Facebook app works just great using the Facebook Conversion API as we explained in-depth on this page: Shopify & Facebook Integration.
This practice will allow you to set up Facebook Pixel using Shopify Pixels, and it includes the following events:
We intentionally did not include the Facebook Pixel’s purchase event here because we definitely do not recommend using this as your primary Facebook Pixel.
However, if you have any problems with the existing native setup; you can consider adding purchase event by yourself using the codes provided above in the GA4 section.
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
// replace 111111111111 with the pixel ID provided by third-party
fbq('init', 111111111111);
// integrate third-party pixel tracking
analytics.subscribe("page_viewed", event => {
fbq('track', 'PageView');
});
analytics.subscribe("product_viewed", async (event) => {
fbq('track', 'ViewContent', {
content_ids: [event.data.productVariant.id],
content_name: event.data.productVariant.title,
currency: event.data.productVariant.price.currencyCode,
value: event.data.productVariant.price.amount,
});
});
analytics.subscribe("product_added_to_cart", async (event) => {
fbq('track', 'AddToCart', {
content_ids: [event.data.cartLine.merchandise.id],
content_name: event.data.cartLine.merchandise.product.title,
currency: event.data.cartLine.merchandise.price.currencyCode,
value: event.data.cartLine.merchandise.price.amount,
});
});
analytics.subscribe("checkout_started", async (event) => {
fbq('track', 'InitiateCheckout');
});
You just need to see if it works now. You can use Facebook’s Pixel helper to see if the events are being pushed. As mentioned earlier, it didn’t work for some of our stores. So, there’s nothing to worry about if you go through the same process.
Do not change your primary, existing setup. If you love learning and playing around; create a new GA4 property and follow our tutorials and then cross-compare the results in both analytics platforms.
Try not to follow any tutorials that are not written by Shopify Partners or experts with proven records.
Our open-source solution should work and the GA4 should be up and running on your Shopify store with the major e-commerce events. We have tested this in many possible scenarios and stores. Stay tuned as we will keep improving the solution.
As the Analyzify team, we are always up for the best solution. At the moment, it is still definitely: Google Tag Manager.
You can keep using the setup you have and trust. Most Shopify merchants rely on Google Tag Manager to centralize and manage their tags. Google Tag Manager will keep working as it is until the next notice.
We are working on creating data layers using Shopify Pixels and we plan to execute them through Google Tag Manager. We believe this combination will work great.
We advise against adding multiple pixels to Shopify, as this can adversely affect your performance and profitability.
Multiple Facebook pixels on your Shopify store will trigger multiple conversion events for each visitor, resulting in lower conversion rates and higher costs per conversion.
Instead of using multiple Facebook pixels, we suggest using Google Analytics 4. This way, you can track all the relevant data in one place, without any drawbacks.
If you have a Plus plan and have upgraded to the new checkout version of Shopify, your already-existing GTM container for the checkout.liquid file will stop working soon as Shopify will not let you add scripts.
You can use the Analyzify & Shopify Pixels Checkout Module as a powerful solution for the new checkout version of Shopify & important events and pageviews during the checkout process without the need for the checkout.liquid file.
You can consider purchasing Analyzify to leave everything to expert hands and have the best possible data analytics setup on your Shopify store.
As seen on this topic, our team stays on top of the industry updates and implements them into our product once they are reliable & stable. Additionally, we don’t hesitate to execute the updates on our clients’ stores.
We are discovering the Shopify Pixels feature at the moment. And we have already released an open-source community solution for those who want to test it as well.
For example, our experts (depending on your case) can advise that Shopify Pixels will work better for your store on a specific case. We can apply this solution specifically to your store upon your approval, at no extra cost.
Here is what you get with Analyzify:
With the Analyzify v3, we will have several different setup options, including Shopify Pixels, Google Tag Manager, Server-side, and more. Existing Analyzify clients always have the option to get a free upgrade.
Have questions? Don’t hesitate to contact our amazing support team.
You can consider purchasing Analyzify to leave everything to expert hands and have the best possible data analytics setup on your Shopify store. As seen on this topic, our team stays on top of the industry updates and implements them into our product once they are reliable & stable. Additionally, we don’t hesitate to execute the updates on our clients’ stores.
We are discovering the Shopify Pixels feature at the moment. And we have already released an open-source community solution for those who want to test it as well. However, we DO NOT recommend using Shopify Pixels (or any recently released solution) as the primary tracking source until the results are proven.
For example, our experts (depending on your case) can advise that Shopify Pixels will work better for your store on a specific case. We can apply this solution specifically to your store upon your approval, at no extra cost. Here is what you get with Analyzify:
We are releasing Analyzify v3 once Shopify releases the Shopify Web Pixels API. We will have several different setup options, including Shopify Pixels, Google Tag Manager, Server-side, and more. Existing Analyzify clients always have the option to get a free upgrade.
Have questions? Don’t hesitate to contact to our amazing support team.