[Shopify Customer Pixel] How to Configure GA4 View Cart Event Using Google Tag Manager

Configuring a "View Cart" event on your Shopify store is crucial for tracking customer interactions and optimizing your e-commerce analytics. In this guide, I'll walk you through the steps to set up this event using the newer customer pixel section in Shopify. We'll also connect it with Google Analytics 4 (GA4) to ensure all your data is accurately captured and analyzed.

1. Activating Customer Pixels in Shopify

The first step is to ensure that customer pixels are active on your Shopify store. To do this:

Go to the Shopify Backend: Log in to your Shopify admin dashboard.
Navigate to Settings: Scroll down to the "Customer Events" section under the settings menu.
Enable Customer Pixels: This section allows you to create and manage customer events. Ensure it is activated so you can proceed with adding custom events like "View Cart."

2. Adding a Custom Pixel for the View Cart Event

Now, let's create the custom pixel that will track the "View Cart" event:

Add a Custom Pixel:
- In the customer event section, click on "Add Pixel."
- Name your pixel something relevant, such as "Data Layer."
Configure Pixel Settings:
- Permission: Set it to "Not Required."
- Data Sale: Select the option that indicates "Does Not Qualify as Data Sale."
- Save the Pixel: Once configured, hit the "Save" button.
Insert Code Snippet:
- Use the code snippet provided (likely found in the video description or tutorial materials).
- Paste this code into the designated code section.
- Google Tag Manager Container ID: Ensure you update the placeholder in the code with your specific Google Tag Manager (GTM) container ID.

view_cart.js
// Initialize the dataLayer
window.dataLayer = window.dataLayer || [];
(function (w, d, s, l, i) {
  w[l] = w[l] || [];
  w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
  var f = d.getElementsByTagName(s)[0],
    j = d.createElement(s),
    dl = l != "dataLayer" ? "&l=" + l : "";
  j.async = true;
  j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
  f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-EXAMPLE");
function logEventToConsole(dataLayerEvent) {
  const customStyle01 =
    "color: #FFFF00; background-color: #000000; font-size: 10px; font-weight: bold; padding: 2px 0;";
  console.log("%cDataLayer Event: view_cart ", customStyle01, dataLayerEvent);
}
analytics.subscribe("cart_viewed", (event) => {
  const getEventData = (obj, path, fallback = "") => {
    return (
      path.split(".").reduce((acc, part) => {
        if (acc && part.includes("[")) {
          const [key, index] = part.replace("]", "").split("[");
          return acc[key] ? acc[key][index] : undefined;
        }
        return acc ? acc[part] : undefined;
      }, obj) || fallback
    );
  };
  const page_data = {
    hostname: getEventData(event, "context.document.location.hostname"),
    location_query_string: getEventData(event, "context.document.location.href"),
    path: getEventData(event, "context.document.location.pathname"),
    referrer: getEventData(event, "context.document.referrer"),
    page_title: getEventData(event, "context.document.title"),
    url: getEventData(event, "context.document.location.href"),
  };
  const user_data = {
    id: event.clientId,
    language: getEventData(event, "context.navigator.language"),
    userAgent: getEventData(event, "context.navigator.userAgent"),
  };
  const event_data = {
    timestamp: event.timestamp || "",
    id: event.id || "",
  };
  const ecommerce_data = {
    currency: getEventData(event, "data.cart.cost.totalAmount.currencyCode"),
    value: getEventData(event, "data.cart.cost.totalAmount.amount"),
    items: event.data.cart.lines.map((line, index) => ({
      item_id: getEventData(line, "merchandise.product.id"),
      item_name: getEventData(line, "merchandise.product.title"),
      item_brand: getEventData(line, "merchandise.product.vendor"),
      item_category: getEventData(line, "merchandise.product.type"),
      price: getEventData(line, "merchandise.price.amount"),
      item_variant:
        getEventData(line, "merchandise.title") ||
        getEventData(line, "merchandise.untranslatedTitle"),
      item_list_name: "Cart",
      index: index + 1,
      product_id: getEventData(line, "merchandise.id"),
      product_image: getEventData(line, "merchandise.image.src"),
      product_url: getEventData(line, "merchandise.product.url"),
      product_untranslatedTitle: getEventData(line, "merchandise.product.untranslatedTitle"),
      product_sku: getEventData(line, "merchandise.sku"),
      quantity: getEventData(line, "quantity"),
    })),
  };
  const dataLayerEvent = {
    event: "view_cart",
    user_data: user_data,
    event_data: event_data,
    ecommerce: ecommerce_data,
    page_data: page_data,
  };
  const newUrl = new URL(dataLayerEvent.page_data.location_query_string, window.location.origin);
  const newTitle = dataLayerEvent.page_data.page_title;
  if (newUrl && newTitle) {
    history.pushState(null, newTitle, newUrl.toString());
  }
  dataLayer.push({ ecommerce: null });
  window.dataLayer.push(dataLayerEvent);
  logEventToConsole(dataLayerEvent);
});

3. Editing the Code Snippet with Google Tag Manager ID

To link your custom pixel with Google Tag Manager:

Retrieve GTM Container ID:
- Go to tagmanager.google.com and select your container.
- Copy the container ID from the top of the page.
Update the Code Snippet:
- Paste the container ID into the snippet where indicated.
- Save your changes to ensure the pixel is correctly configured.

4. Connecting the Pixel with Shopify Backend

After configuring the pixel, it must be connected to your Shopify store:

Connect the Pixel:
- Go back to your Shopify backend.
- Ensure that the pixel is correctly linked, or the events won't display on your website.

5. Triggering and Testing the View Cart Event

To verify that the "View Cart" event is working:

Trigger the Event:
- Visit your website and navigate to the cart page.
- Use your browser's inspect tool (right-click > Inspect) and switch to the console tab.
Check the Data Layer:
- In the console, you should see the "Page View" and "View Cart" events firing.
- Verify that the "View Cart" event includes an e-commerce object with the correct item details.

6. Creating GA4 Configuration and Event Tags

For Google Analytics 4 tracking:

Create a GA4 Configuration Tag:
- In Google Tag Manager, create a new tag for GA4 configuration.
- Use your GA4 measurement ID (found in your Google Analytics account) to complete this tag.
Create a View Cart Event Tag:
- Add another tag for the "View Cart" event.
- Use a custom trigger that only activates on the "View Cart" event.
- Configure it to send enhanced e-commerce data, ensuring it captures all relevant details.

7. Testing and Verifying Events on Shopify

Testing is essential to confirm everything works as intended:

Submit Changes: In Google Tag Manager, submit your changes to make them live.
Test the Event:
- Go back to your Shopify store and trigger the "View Cart" event.
- Inspect the page and verify that the event is firing correctly.
Additional Testing:
- You can use a data layer extension or the network tab in your browser to see all requests and events.
- Ensure that the event sends the correct product details, currency, and value.

8. Final Verification in Google Analytics

Finally, verify the event in Google Analytics:

Real-Time View:
- Check the real-time view in GA4 to see the "View Cart" event firing.
- Verify that all parameters, such as currency and value, are correctly recorded.
Additional Debugging:
- If necessary, additional debugging can be done to ensure the items array works correctly. This may involve more advanced steps not covered in this guide.

By following these steps, you'll have a fully functional "View Cart" event on your Shopify store, ensuring you capture valuable customer interaction data for your analytics.