Shopify analytics

[wizardlyhel]

Shopify Analytics components

These analytics components are designed to work on any frameworks written in React.
All inputs are fully typed.

useShopifyCookies(hasUserConsent = false, domain = '')

Creates and refreshes _shopify_y and shopify_s cookie.

Usage:

useShopifyCookies(true, 'my-shop.com')

sendShopifyAnalytics

Reports analytics to Shopify

Usage:

  sendShopifyAnalytics({
    eventName: AnalyticsEventName.PAGE_VIEW,
    payload: {
      ...getClientBrowserParameters(),
      shopId: 1,
      currency: 'USD',
      hasUserConsent,
    }
  },
  'my-shop.com', // Supplying this domain will send monorail events to https://my-shop.com/.well-known/shopify/monorail/unstable/produce_batch
);

getClientBrowserParameters()

Collects client browser specific data.

Follow-up PRs:

• Implement client side with network api fallbacks (sendBeacon/fetch/XHR)
• Implement payload validation with __HYDROGEN_DEV__
• Write docs

Additional context

---

Before submitting the PR, please make sure you do the following:

• Write unit tests
• Read the Contributing Guidelines
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123)
• Update docs in this repository according to your change
• Run yarn changeset add if this PR cause a version bump based on Keep a Changelog. If you have a breaking change, it will need to wait until the next major version release. Otherwise, use patch updates even for new features. Read more about Hydrogen-UI's versioning.

[DavidWittness]

What would be the difference for serverSendShopifyAnalytics and clientSendShopifyAnalytics.

Is there a possibility of an isomorphic implementation, or would it be too difficult to condense these functions?

[wizardlyhel]

What would be the difference for serverSendShopifyAnalytics and clientSendShopifyAnalytics.

Is there a possibility of an isomorphic implementation, or would it be too difficult to condense these functions?

Difference would be the client implementation would have network api implementation fallbacks like how Trekkie does: server implementation wouldn't have these network api available.

There are other analytics reporting techniques we can add to the client implementation (ie. leaky bucket implementation), however, none of these client side code path should exist in the server implementation. For performance reasons, I like to separate them

[frehner]

Thanks for this! This first pass review is just from looking at the code; I'll spend some time soon actually running the code locally and playing around with it. ❤️

[frehner]

Can we remove this? Thanks.

[frehner]

wut hahaha. I'm going to have to play around and see what this is doing. Apparently something with positive integers... which makes sense in a function called hexTime. Hmmm

[frehner]

Thanks so much!

[beamercola]

in next.js, is getServerSideProps required? We're currently rendering everything as static

Also, does this need to be on primary domain to work? Vercel previews - I'm not seeing traffic from me on the "Live View"

[frehner]

in next.js, is getServerSideProps required? We're currently rendering everything as static

No, that's just an example.

Also, does this need to be on primary domain to work? Vercel previews - I'm not seeing traffic from me on the "Live View"

Can you clarify what you mean here? Are you saying that when you use a Vercel preview, you don't see your traffic info in Shopify?

If so, can you check to make sure that the analytics code is running in your browser and making network requests? You should see network requests to either https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch or https://monorail-edge.shopifysvc.com/unstable/produce_batch

If you're having issues, please open a new issue in this repo with this information. 👍

[wizardlyhel]

I don't know what vercel preview url scheme is like, however, if you want to see add-to-cart (Live View) working.

1. You are not previewing using Oxygen, and the preview url is not 'localhost'. (Live view is a Shopify production feature)

2. You are using useShopifyCookies so that you have _shopify_y and _shopify_s cookies set (you can inspect this)

3. You are using createStorefrontClient with a public access token created by Oxygen .. OR
   You are making an Storefront API call with fetch request init option credential: 'include' under the same top-level domain

   Example:

   • Vercel app hosted on my-shop.com
   • Shopify online store domain is on checkout.my-shop.com
   • Vercel app calls Storefront API with store domain set to checkout.my-shop.com
   • The useShopifyCookies is set properly with useShopifyCookies(false, 'my-shop.com')

   Note: This is assuming the add to cart mutation storefront API is called from the client side.

We are missing documentation on these newly introduced functions and we're working on it

[pveen2]

Hi @wizardlyhel , this is really cool thanks! I replicated all the steps, i see when someone is one the website in the liveview, but for some reason i dont get the ATC events in the live view. I used the example hook of the Hydrogen Demo store and implemented it in my own Hydrogen(remix) project.

I use oxygen for hosting but still dont get any ATC event trough to my live view. Even when im on the beta.my-shop.com URL and the online store is on my-shop.com. What i am still doing is that i don't request to beta.my-shop.com but to name.myshopify.com.

When i go to the URL, i see the request to https://monorail-edge.shopifysvc.com/unstable/produce_batch. So as far as i can see everything is working(console logged all events), the network request are there. I just don't see them in my live view.

What is in your opinion the best way to debug these issues? Is there a way you can enable the localhost ATC just for debugging?

[wizardlyhel]

Make sure your storefront api shop domain is sending to my-shop.com (and not name.myshopify.com)

Since your app is on beta.my-shop.com, the cookies domain is most likely set on beta.myshop.com. You would need to change this domain setting in useShopifyCookies(true, 'my-shop.com') so that Shopify cookies are accessible by both beta.my-shop.com and my-shop.com

Live view - If you want to test locally, you can ngrok your localhost to a tunnelled ip address and make sure to add an item to cart to start seeing live view working (This should work - not 100% certain)

[pveen2]

Thanks @wizardlyhel for the extensive response, i couldnt get it working yet with your solution but will keep trying. Do you know if the Hydrogen demo store analytics are fully working?

[wizardlyhel]

Just double check on the latest Hydrogen remix build - You are right. The ATC session on Live View doesn't work. I'll get that fix.

However, you should be able to see visitor on site counter increase.

[wizardlyhel]

PR to fix on Hydrogen - Shopify/hydrogen#614