Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.34k stars 260 forks source link

Analytics RFC #170

Closed benjaminsehl closed 1 year ago

benjaminsehl commented 1 year ago

https://github.com/Shopify/h2-demo-store/pull/196/files

steve-jiang commented 1 year ago

I found the analytics space in Shopify quite confusing.

The "official" way to do analytics in Shopify is to use the new Shopify Pixel Manager. My understanding after reading it is that you have 2 ways of doing pixels the official way:

  1. App Pixel - it is using Web pixel extension API which runs in a web worker
  2. Custom Pixel - it is using Lax sandbox which essentially runs 3rd party scripts in an iframe

So it looks like Shopify is encouraging all app developers to include tracking using the web pixel extension API so merchants don't have to manually do it. A good example would be merchants' Meta channel that has Meta Pixel built-in.

Merchants then manage any other 3rd party pixels that don't offer an App pixel and move them to custom pixels in the Customer Events setting page.

Questions:

After reading this RFC I am leaning towards that Hydrogen won't support the Shopify Pixel Manager as it is talking about having a built-in Analytics component that subscribes to loaders and actions to query the store data separately with a longer cache. Basically, Hydrogen won't be able to get the Web Pixel Data Layer/Objects as it is only available to the online store and checkout.

On top of all the above, you also have merchants who want to use Partytown to achieve the same performance as the Web Pixel Extention since both are using web worker. Or move the entire tracking to Cloudflare Zaraz (is this something that can be bundled in Oxygen).

Can we please have some guidance here on what is the right way(long term) for merchants to implement tracking on Hydrogen?

raufabr commented 11 months ago

Bump - I'd like to find out more about this too as we're having some issues with this.

i-m-puru commented 10 months ago

Can someone guide how to implement the analytics for Facebook Pixel and Conversion API in Hydrogen, it's very difficult to setup client-side analytics on RemixJS

Rushijoshi3798 commented 3 months ago

@i-m-puru Hey, I am experiencing the similar kind of issue you just explained. Did you resolved it or not?

i-m-puru commented 3 months ago

@i-m-puru Hey, I am experiencing the similar kind of issue you just explained. Did you resolved it or not?

Yes I figured out a way to use FB Client side. I will edit this comment and share you how to I did it.

Rushijoshi3798 commented 3 months ago

@i-m-puru That would be great. I'm looking forward to your solution. Thanks in advance.

i-m-puru commented 3 months ago

@Rushijoshi3798 hydrogen.zip This is how I setup my Analytics, working fine. If you need help ask me here, I would also like to know more about what you are working on.

Rushijoshi3798 commented 2 months ago

@Rushijoshi3798 hydrogen.zip This is how I setup my Analytics, working fine. If you need help ask me here, I would also like to know more about what you are working on.

Thanks for sharing this. Let me try to resolve this issue, However I was experiencing the issue at the checkout page only. Rather then that all the integrations are working fine.

So basically, we are working on a shopify hydrogen project, using remix.js , where we have made whole site & integrated analytics as well but didn't able to pass the data from facebook pixel via UTM tracking on checkout page. Till the checkout the frontend is on remix.js but the checkout is of shopify (liquid) so at that moment we are facing these integration issues.

Rushijoshi3798 commented 2 months ago

@i-m-puru Hey, I want to reach out to you professionally to get this resolve, is this possible? if yes, kindly share your email id. You can get my details through my GitHub profile.

j-Riv commented 2 months ago

@Rushijoshi3798 you might need to use customer events. For example subscribe to the checkout_completed event. Here are some examples from Shopify with GTM. https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

i-m-puru commented 2 months ago

@Rushijoshi3798 you might need to use customer events. For example subscribe to the checkout_completed event. Here are some examples from Shopify with GTM. https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

Will this work in Hydrogen Storefront? It seems like the video is for Online Store.

j-Riv commented 2 months ago

@Rushijoshi3798 you might need to use customer events. For example subscribe to the checkout_completed event. Here are some examples from Shopify with GTM. https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

Will this work in Hydrogen Storefront? It seems like the video is for Online Store.

Yes, it will work with Hydrogen, you can also take a look at this. https://shopify.dev/docs/storefronts/headless/hydrogen/analytics