AnalyticsEventName.ADD_TO_CART not tracking in Shopify Dashboard

[techtic-irfan]

The event is not tracked in our Shopify admin. The following request is being sent to https://monorail-edge.shopifysvc.com/unstable/produce_batch which responds with HTTP 200 OK. PAGE_VIEW events are being tracked using the same approach.

 {
  "events": [
    {
      "schema_id": "custom_storefront_customer_tracking/1.0",
      "payload": {
        "source": "headless",
        "hydrogenSubchannelId": "0",
        "is_persistent_cookie": true,
        "ccpa_enforced": false,
        "gdpr_enforced": false,
        "unique_token": "",
        "event_time": 1687434204279,
        "event_id": "e2eabbb9-4B64-4306-B68F-58749A194B81",
        "event_source_url": "https://house-of-leon-furniture.com/products/provence-outdoor-dining-table-base",
        "referrer": "",
        "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36",
        "navigation_type": "reload",
        "navigation_api": "PerformanceNavigationTiming",
        "shop_id": 12345678900,
        "currency": "USD",
        "event_name": "product_added_to_cart",
        "cart_token": "c1-51ff2af31116bc1d2798483c3d107cc4",
        "products": [
          "{\"product_gid\":\"gid://shopify/Product/7348881555629\",\"name\":\"Provence Outdoor Dining Table -72\\\"\",\"variant\":\"Default Title\",\"brand\":\"House of Léon\",\"price\":\"3800.0\",\"quantity\":1,\"variant_gid\":\"gid://shopify/ProductVariant/42189585907885\",\"sku\":\"FRN-PRVNC-DT\",\"product_id\":7348881555629,\"variant_id\":42189585907885}"
        ]
      },
      "metadata": { "event_created_at_ms": 1687434204279 }
    }
  ],
  "metadata": { "event_sent_at_ms": 1687434204279 }
} 

Package: "@shopify/hydrogen-react": "*",
"next": "11.1.0",

Page view events are working fine.

storefrontAccessToken are used from headless sales channel.

[wizardlyhel]

The add to cart event is only one of the requirements to get add to cart tracking working

Here are a couple issue threads of people getting it to work on their app:

• Hosted on vercel: Hydrogen: Cart events not shown on Live View or Analytics dashboard #884
• Getting add to cart tracking working - Hydrogen React: ADD_TO_CART event not tracked in Shopify Analytics #701

In summary:

• You will need to use the public storefront api token created by Hydrogen
• The online store is assigned with a sub-domain of your main domain
• Make sure you are using useShopifyCookies with the domain prop set to your top level domain
• Make sure you are supplying a storefrontHeaders to your createStorefrontClient. Details - Hydrogen: Cart events not shown on Live View or Analytics dashboard #884 (comment)

[techtic-irfan]

Thanks for quick replay,

I already go through those issues but didn't get success so please have look at my points below and let me know what going wrong

• I have used the public storefront API token created by Headless channel not Hydrogen, is it fine?
• The online store is assigned with a sub-domain of your main domain: I didn't get this point. Our domains are: house-ofleon.myshopify.com and house-of-leon-furniture.com
• useShopifyCookies({hasUserConsent: true, domain: "house-of-leon-furniture.com"});
• I am not using the createStorefrontClient for build a client, used shopify-buy so how do I supply storefrontHeaders?
• I can see the _shopify_y and _shopify_s cookies are there

[wizardlyhel]

I have used the public storefront API token created by Headless channel not Hydrogen, is it fine?

No, you need to use one created by Hydrogen channel. You can just create one and copy over the env vars

The online store is assigned with a sub-domain of your main domain: I didn't get this point. Our domains are: house-ofleon.myshopify.com and house-of-leon-furniture.com

Assign a 3P domain to house-ofleon.myshopify.com so that it is checkout.house-of-leon-furniture.com.

I am not using the createStorefrontClient for build a client, used shopify-buy so how do I supply storefrontHeaders?

shopify-buy SDK does not support add to cart event tracking

[wizardlyhel]

You can still track events without the same checkout domain. However, your order session conversion summary will always start at checkout and you most likely will have double session counts. One set of session count from your app and another set of session count from checkout. It might impact other session related reports.

[techtic-irfan]

It would be good but I don't know how do I setup that so can you please share documentation or code if you have

[wizardlyhel]

Here are the guides:

• https://shopify.dev/docs/custom-storefronts/hydrogen/analytics/client-side-analytics - this is written if you are building with Hydrogen - Remix app. If you are not building with Hydrogen, then you will need to figure it out how to get the data you need for analytics to the client side.
• https://shopify.dev/docs/custom-storefronts/hydrogen/analytics/shopify-analytics - this is for sending analytics to Shopify

[techtic-irfan]

Hi,

We have Assign a 3P domain to house-ofleon.myshopify.com and now our checkout domain is checkout.house-of-leon-furniture.com.

But still add to cart event not tracking can you please help me out

Below are my code

useShopifyCookies({
    hasUserConsent: true,
    domain: "house-of-leon-furniture.com",
});
<ShopifyProvider
      storeDomain="house-ofleon.myshopify.com"
      storefrontToken="token generated from hydrogen channel"
      storefrontApiVersion="2023-04"
      countryIsoCode="US"
      languageIsoCode="EN"
    >
      <ShopProvider>
        <CartProvider>
......................................
        </CartProvider>
      </ShopProvider>
    </ShopifyProvider>

trackAddedToCart = async (addedItem, variantId) => {
    await client1
      .mutate({
        mutation: gql`
          mutation {
            cartCreate(
              input: {
                lines: [{ quantity: ${addedItem.quantity}, merchandiseId: "${variantId}" }]
              }
            ) {
              cart {
                id
              }
            }
          }
        `,
      })
      .then((cart) => {
        const cartObj = cart.data.cartCreate.cart;
        const productAnalytics = {
          productGid: addedItem.variant.product.id,
          name: addedItem.title,
          brand: "House of Léon",
          price: parseFloat(addedItem.variant.price.amount),
          variantGid: addedItem.variant.id,
          variantName: addedItem.variant.title,
          sku: addedItem.variant.sku,
          quantity: addedItem.quantity,
        };
        const payload = {
          ...getClientBrowserParameters(),
          cartId: cartObj.id,
          hasUserConsent: true,
          shopId: "gid://shopify/Shop/59322171565",
          currency: "USD",
          shopifySalesChannel: ShopifySalesChannel.headless,
          products: [
            {
              ...productAnalytics,
            },
          ],
        };
        sendShopifyAnalytics({
          eventName: AnalyticsEventName.ADD_TO_CART,
          payload,
        });
      });
  };

[wizardlyhel]

The key to get the add to cart session showing up in your admin is actually the cart mutation query. I don't know how is client1.mutate implemented but the request to Storefront API this library creates needs to contain 2 request headers:

• 'Shopify-Storefront-Y' - contains the value of _shopify_y cookie
• 'Shopify-Storefront-S' - contains the value of _shopify_s cookie

[benjaminsehl]

Important

Do not use the above instructions for non-Hydrogen storefronts

For anyone discovering this discussion, using the above comments as a workaround to get non-Hydrogen apps to work with Shopify Analytics is not something Shopify can actively support today. We do hope to provide a way for developers building non-Hydrogen headless apps to use Shopify Analytics in a supported way in the future, but we do not have any news to share at this time.

[jamalsoueidan]

Can we use pixel manager with third party apps in hydrogen?

[claridgicus]

I have Shopify analytics running on my angular/vercel builds, it tracks pretty much everything from the client side natively.

Might make a blog post and chuck it up for people who aren't reacters, otherwise happy to help other peeps.