Chapter 1
What is "Shopify Pixel's"?
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
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:
- What is Shopify Pixels change and how will we use it?
- What is Shopify Customer Events?
- Should we take any actions at this point?
- Can we set up Google Analytics 4 (GA4) using Shopify Pixels?
- What should we expect from this update in the near future?
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 advise not taking any action at this point as most of the features, including the app pixels, are still in a sandbox environment and are unavailable to use. Give the Analyzify team and other professionals in the field some time to test, experiment, and gather data from initial tests.
Here is a quick snapshot of what Shopify Customer Events delivers, and how you should react:
- This is an update that excites us – but it is not ready to function perfectly yet. Therefore, we do not recommend taking any action in the production environment.
- We have prepared a step-by-step tutorial in case you want to play around and discover more about how it works. Check out the corresponding section below.
- Thanks to what it offers, we will not be dependent on 3rd party Javascripts to track the events anymore. Shopify will provide these from the backend using Shopify Pixels & Customer Events.
- As a merchant, you will easily see and manage all the pixels created on your store (by apps or professionals).
- The pixels won’t need to be added to your theme files anymore – so they will be more reliable and stable.
- Apps like Analyzify will have more capabilities and will provide much better results using the Pixels API.
- Shopify doesn’t recommend using this feature (yet) unless you are a professional.
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:
- Events such as product view, add to cart, purchase, page view, etc., will be available without modifying any sort of code and additional Javascript, which will make tracking more reliable, flawless, and accurate.
- You will have more control over the data being sent to 3rd parties, see which pixels are shared in these settings, and easily disable, delete or manage.
- 3rd party apps will utilize the Pixels API to get the relevant event data instead of injecting codes into your theme files.
- You will secure privacy compliance more easily with a streamlined data collection and sharing method.
- It will be possible to create custom pixels for some stores that need unique events to be tracked.
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.
Effortlessly integrate Shopify & GTM, including advanced data layers.
The importance of Shopify Pixels
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 years:
- Google launched GA4 and made it the primary version,
- iOS 14.5 updates changed everything in the tracking world,
- Facebook launched Conversion API,
- Google Ads launched Enhanced Conversions,
- Google launched server-side tracking
- And 10s more changes.
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).
What’s changing exactly?
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:
- Catch the purchase event,
- Create a data layer window,
- Push purchase-related data into this data layer.
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.
Chapter 2
Shopify Customer Events
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:
- Manage Pixels,
- Share data without 3rd party scripts,
- Get accurate data & reports,
- Monitor what’s sent from the store to 3rd parties.
Without needing to inject code blocks into your Shopify themes, which will also provide more accurate results at the end of the day.
Chapter 3
Code Overview: Example Pixel
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.
Chapter 4
GA4 E-commerce Tracking Setup Using Shopify Pixels
Here we are in 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.
“Shopify Pixels” has just been released and involves some risks. We do not recommend using this as your primary reporting channel. You can use a new GA4 property for test purposes. Shopify clearly recommends using an app like Analyzify or working with 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.
Play Video about Youtube: Setup GA4 on Shopify using Shopify Pixels
Step 1: Add a new Pixel on Shopify Customer Events
Visit Shopify Admin > Settings > Customer Events > Add Custom Pixel
Name the new pixel as Analyzify OS – GA4 v1.0. Click Add Pixel.
Please try to do the naming as we suggest.
This will get quite important once you have more pixels.
It will help you to manage and stay up-to-date. (OS refers to open-source)
Step 2: Copy Analyzify’s open-source Shopify GA4 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 our 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));
});
Step 3: Paste the code & add your own GA4 ID
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. For a detailed video setup For a detailed video setup
Step 4: Connect the pixel
The Shopify pixels don’t start working if you don’t CONNECT them. Click CONNECT and move on to the next step for the tests. The button should be changed to “Disconnect” if you properly connected.
Pro tip: Our tests showed that you should DISCONNECT and CONNECT again if you perform any change within the pixel.
Step 5: Testing Shopify GA4 Pixel
Google Analytics 4 has several different testing methods. We will use the GA4 RealTime view in this tutorial. Make sure to check out 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 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 our Youtube videos’ troubleshooting section.
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.
Step 6: Double-check your data after a couple of days
Real-time reports are great to show us the data flow. However, we can never trust a data source before waiting for a couple of days. You should collect real visitor’s data and compare it with your GA4 data to make sure that the setup is properly working.
We hope everything went well for you. Before you leave!
- Do NOT trust this setup yet – even if the test went well. It’s still under heavy development and things might stop working.
- Make sure to use a secondary Google Analytics 4 account for this and compare the results often.
- The pixels you add here in Shopify Pixels will not be supported by Shopify. Consider purchasing Analyzify for the best results. Our team will make sure to keep your setup up-to-date with the best practices.
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.
Chapter 5
Cons & Risks
Shopify recently released this feature, on October 3. This is quite a major change – and contains many risks as every new feature. 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, the best practices we suggest:
- Do not use your primary tracking pixels with Shopify Pixels yet. Use a secondary pixel (eg: create a new GA4 property), wait for a couple of weeks, and then compare the results.
- Wait for some time for professionals (like the Analyzify team) to test these features in many stores and share their experiences and tutorials.
- Use an app from a reliable app developer or hire an expert with a proven record.
- Do not trust every tutorial.
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. This will probably change in near future. However, you better 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.
Chapter 6
Shopify Customer Events Practice: Facebook Pixels
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:
- Page view
- Product View
- Add to cart
- Initiate Checkout
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 yourself using the codes that provided above in the GA4 section.
Step 1: Getting Started
Here is the Custom Meta Pixel Shopify provides.
However, since it did not work for us, we needed to change some elements. Find the updated code block we have prepared below, then copy and update "111111111111" with your pixel ID.
!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');
});
Step 2: Create a new Shopify Pixel through Shopify Admin
Navigate to Shopify Admin > Customer Events > Add New. Then, name the pixel as you wish but make sure that you include "Test" in it so you don't get confused.
Step 3: Paste the code, save, and connect.
Paste the code in the "Code" section and click SAVE in the top right corner. Then, click CONNECT. Keep in mind that you should not forget to update your Facebook Pixel ID. You can also type a random Facebook Pixel ID, as you are just testing things out here.
Step 4: Test it out
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.
Chapter 7
FAQ on Shopify Pixels
It is too early to rely on Shopify Pixels. Do not change your primary, existing setup. If you love learning and playing around; create a new GA4 property and follow our tutorials. Wait for some time (ideally a month or so) and then cross compare the results in both analytics platforms.
Try not to following 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 tunes as we will keep improving the solution.
As 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 executing them through Google Tag Manager. We believe this combination will work great.
As an Analyzify client, you are always in safe hands. Our product team stays on top of the industry updates and applies those to our solution.
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.
Things change pretty often in the data analytics world. And we are dedicated to providing Shopify merchants with the best possible solution – including alternatives. Our solution is flexible, and we always offer alternative setup methods. Our dedicated, expert support team is right next to you whenever you have a question and/or whenever you need help.
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.
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:
- Hands-on Audit & Setup & Validation service [at no extra cost]
- The most loved Shopify & Google Tag Manager & GA4 integration
- Data layers & pre-built GTM container
- Real-time data validation
- Google Ads Enhanced Conversions, remarketing pixels (Including hands-on audit)
- Custom solutions to store-level tracking problems
- GDPR compliant tracking including setup service
- [Soon] Complete setup using Pixels API
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.