Tracking/Analytics

[pveen2]

Hi There! Great job was done on Hydrogen! We really like it thus far.

We are working as an agency with headless Shopify projects(gatsby/next) for quite some time now.
One off the biggest challenges is always to get the tracking properly working. Common issues we face are cross-domain issues, as the checkout is always on another domain and making sure that the data structure is the same in the checkout as on the headless website. With Shopify themes, this is never an issue, as most of it comes out of the box. Also, a big advantage of a liquid Shopify theme is that you can use Shopify analytics. With our headless projects the conversion rate, online store sessions are not correct as they only show the traffic of the checkout.

So my question is, what is your best practice regarding tracking and how is it taken into account with Hydrogen/Oxygen? Will it work the same as liquid themes, so tracking out of the box(would be awesome😉)? And how do you see Hydrogen working with Shopify Analytics? I posted this here as I think it is a vital part of e-commerce and would be great if Hydrogen can take this into account as a feature!

[cdarland]

+1 on this topic. While there are always workarounds for instrumenting our analytics outside of the native Shopify Analytics structure (GA/Amplitude/Heap etc.), it would be amazing to have the native analytics working out of the box with the H20 stack.

Or even providing some custom hooks and a standard API for clients to use when setting that up in their Hydrogen themes would be super helpful!

[nandorojo]

Yeah I'm stuck on the same thing. Not being able to track conversion for a shopify site is really tough. What is the best recommendation here?

[benjaminsehl]

I highly recommend checking out this library: https://getanalytics.io/utils/react-hooks/

It has a great DX, and since it’s platform agnostic, adding a plugin to support Shopify’s native analytics if/when that comes would be fairly trivial.

One thing I would love to consider/discuss with Hydrogen is the use of server-side analytics and how we’d go about that.

[benjaminsehl]

If you’d like to be a little more ambitious with your analytics, I’d also recommend taking a look at https://posthog.com/ — a really great tool, though certainly more lift than GA.

[DennisKraaijeveld]

@pveen2 Why do you have cross-domain issues when building headless stores with Gatsby/Nextjs? You know you can host your checkout page on the same domain? :)

[wizardlyhel]

Actively working on getting Shopify analytics fully working on Hydrogen and cross checkout.

• If you include the <ShopifyAnalytics /> component, this would light up the analytics dashboards that are page view related. To ensure conversion metrics are working properly make sure to add the cookieDomain props so that cookies are set at the apex domain level <ShopifyAnalytics cookieDomain="example.com" />
• Currently, if you use Oxygen assigned storefront public api token, add to cart related analytics dashboards and live view will work (Working on opening this up for regular storefront public api tokens and cross domain cookie with cors)
• We'll be adding more Shopify analytic event instrumentation in future so that it matches that of a Online Store

The only reason why we would need to put checkout on a subdomain is the fact that the hydrogen app is hosted on Oxygen / Netlify / ..etc ... and that checkout is Shopify's online store. I also agree this is not ideal so we're looking at how we can bring checkout onto the same domain. However, this will take some time to explore.

[DennisKraaijeveld]

That is great. So Shopify Analytics would work when hosting Hydrogen on a third party hosting platform as well? Vercel for instance.

That was the main key I was missing when I developed my first headless store with Gatsby. I am glad you people are working on this!:)

[wizardlyhel]

That is the idea. We want the Shopify analytics piece be a plug and play kinda work for developers - no matter where you host the app (with some domain level restrictions due to CORS requirements and app security).

Or maybe moving Shopify analytics component as an individual package so that it can be used on any framework.

[davfru]

Hi @wizardlyhel, I added the <ShopifyAnalytics /> to App.server.tsx but, when I navigate my store from hydrogen app (localhost:3000), I do not see any session in the analytics dashboard in my Shopify Admin.

App.server.tsx

<Suspense fallback={null}>
    <ShopifyProvider>
        <CartProvider
            countryCode={countryCode}
            customerAccessToken={customerAccessToken}
          >
            <Router>
              <FileRoutes />
            </Router>
        </CartProvider>
        <ShopifyAnalytics/>
    </ShopifyProvider>
</Suspense>

What am I doing wrong? Thank you.

[wizardlyhel]

You won't see add to cart session while in localhost. The admin filters those events.You can see it once you have your app running in Oxygen or an url that is not localhost

[davfru]

Hi @wizardlyhel thank you. I deployed my app on Netlify and now I see the sessions in the analytics dashboard in my Shopify Admin. Great! What about the add-to-cart event instead? Isn't this available on a third party hosting platform (such as Netlify) yet?

[imgali]

@wizardlyhel has there been any update on the analytics front regarding Hydrogen?

[wizardlyhel]

We're a bit busy these days but I was able to get the following pushed through:

• More Shopify analytics events updated since v1.6 - https://shopify.dev/api/hydrogen/components/framework/shopifyanalytics
• Tracking add to cart events with storefront API without access token restriction (It means the access token doesn't have to be one that was assigned by Oxygen). This powers the Live view - add to cart session dashboard. As long as the top-level domain is the same (ie. example.com making api calls to checkout.example.com), this should work.

[wizardlyhel]

I think you all have been waiting for this. Shopify analytics methods that should work on any React framework.

@shopify/storefront-kit-react' - 2023.1.2 - Don't worry if you are using storefront api at older version. The analytics methods themselves have no association to the storefront api.

Unfortunately, I am a bit short on time so there are no public documents available yet. I will get to it later. Please look at the nextjs app example that I have in the PR.

Shopify/hydrogen-react#108