Analytics Provider, Customer Privacy API and Privacy Banner #1789

wizardlyhel · 2024-02-22T19:32:16Z

Support for Customer Privacy API and better Analytics DX

Proposed developer experience

1. Return the consent configuration

In your root.tsx loader return the consent configuration

export async function loader({context}: LoaderFunctionArgs) {
  return defer({
      // ...other root loader data
+     consent: {
+       checkoutRootDomain: env.PUBLIC_CHECKOUT_DOMAIN,
+       storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
+     }
  });
});

2. Add the `<Analytics>` for facilitating analytics events and instrumenting page view and cart events.

`<Analytics>` props

canTrack - defaults to Shopify.customerPrivacy.userCanBeTracked
cart - can be a deferred promise or an object. If this is defined, cart events will be published
consent - configuration for the consent API banner
shop - can be a deferred promise or object. If this is defined, Shopify will send analytics
customPayload - data to be made available on any analytics events

+ import { Analytics } from '@shopify/hydrogen';

export default function App() {
  const data = useLoaderData<typeof loader>();

  return (
    <html lang="en">
      <body>
+        <Analytics.Provider
+           cart={data.cart}
+           consent={data.consent}
+           shop={data.shop}
+           customData={{foo: 'bar'}} // (optional) will be added to all event payloads
+        >
          <Layout {...data}>
            <Outlet />
          </Layout>
+        </Analytics.Provider>
      </body>
    </html>
  );
}

3. Add page view event for product, collection, cart, search views.

In your product route files,

+ import { Analytics } from '@shopify/hydrogen';

export default function Product() {
  const {product, variants} = useLoaderData<typeof loader>();
  const {selectedVariant} = product;
  return (
    <div className="product">
      <ProductImage image={selectedVariant?.image} />
      <ProductMain
        selectedVariant={selectedVariant}
        product={product}
        variants={variants}
      />
+      <Analytics.ProductView 
+        data={{
+          product: {
+            id: product.id,
+.           title: product.title,
+.           handle: product.handle,
+          }
+         }}
+      />
    </div>
  );
}

4. Publish your own custom events

Anywhere within <AnalyticsProvider>, use the useAnalyticsProvider hook to give you the function to publish additional events.

+ import { useAnalytics } from '@shopify/hydrogen';

export function AnalyticsCheckbox({name}) {
  const {publish} = useAnalytics();
  return (
    <input type="checkbox"
+      onChange={(event) => {
+         publish('custom_checkbox_updated', {
+           name,
+           value: event.targetSrc.checked
+         })
+      }}
    />
  );
}

5. Subscribe to analytics events

Anywhere within <AnalyticsProvider>, use the useAnalyticsProvider hook to give you the function to subscribe to analytics events published within the provider.

+ import { useAnalytics } from '@shopify/hydrogen';

+ export function CustomAnalytics() {
+   const {subscribe} = useAnalytics();
+   useEffect(() => {
+     subscribe('page_viewed', (data) => {
+       console.log('CustomAnalytics - Page viewed:', data);
+     });
+     subscribe('product_viewed', (data) => {
+       console.log('CustomAnalytics - Product viewed:', data);
+     });
+     subscribe('checkbox_updated', (payload) => {
+       console.log('CustomAnalytics - Checkbox updated:', data);
+     });
+     subscribe('cart_updated', (data) => {
+       console.log('CustomAnalytics - cart updated:', data);  // {previousCart, currentCart}
+     });
+     subscribe('product_removed_from_cart', (data) => {
+       console.log('CustomAnalytics - Product removed from cart:', data);
+     });
+   }, []);
+ 
+   return null;
+ }

WHAT is this pull request doing?

HOW to test your changes?

Post-merge steps

Checklist

I've read the Contributing Guidelines
I've considered possible cross-platform impacts (Mac, Linux, Windows)
I've added a changeset if this PR contains user-facing or noteworthy changes
I've added tests to cover my changes
I've added or updated the documentation

packages/hydrogen/src/analytics-manager/AnalyticsProvider.productView.example.tsx

frandiox

Great job! 🔥

packages/hydrogen/src/customer-privacy/ShopifyCustomerPrivacy.tsx

Co-authored-by: Fran Dios <[email protected]>

jonrrivera · 2024-05-09T19:48:38Z

so how do we implement this ? :)

wizardlyhel · 2024-05-09T22:53:41Z

@jonrrivera Please follow the readme in example https://github.com/Shopify/hydrogen/tree/main/examples/analytics

We are working on an official tutorial on shopify.dev

j-Riv · 2024-05-13T18:30:55Z

@wizardlyhel the analytics example that you linked above is marked unstable, is this still the case or are we ok to use this in production? I'm trying to get Google Analytics and Meta Pixel running on our Hydrogen Store. Thank you.

wizardlyhel · 2024-05-13T18:53:59Z

We are just ironing out some bugs when used with 3p consent management tools. Other than that, the api interface is fairly stable . We don't anticipate any more big changes

j-Riv · 2024-05-15T18:07:02Z

@wizardlyhel is there any way to test that custom pixels are actually firing?

wizardlyhel · 2024-05-15T20:10:44Z

@j-Riv You can use this as an example to see console logs when the events are firing https://github.com/Shopify/hydrogen/blob/main/examples/analytics/app/components/CustomAnalytics.tsx

Make sure to include this component in your root.tsx within <Analytics.Provider>

shubhambitqit · 2024-05-28T10:37:33Z

@wizardlyhel I tried following the example but still unable to see any logs.

wizardlyhel · 2024-05-28T16:29:12Z

The unstable version didn't have much error warnings. The stable version will let you know what's missing. Double check the following:

Check that you have the customer privacy cookie banner turned on in your Shopify admin (This won't be a requirement in the next release)
Make sure you have PUBLIC_STOREFRONT_API_TOKEN, PUBLIC_STORE_DOMAIN, PUBLIC_CHECKOUT_DOMAIN defined in your local .env. Do not use the private token's value in place of the PUBLIC_STOREFRONT_API_TOKEN's value. If you are testing in production, make sure PUBLIC_CHECKOUT_DOMAIN is in the storefront's environment variables.
If you are overriding <Analytics.Provider>'s canTrack property, make sure this callback returns a true at some point. If it doesn't return true, no analytics will be sent
Make sure there is no content security error or network error to the checkout domain url in console log

shubhambitqit · 2024-05-29T06:50:50Z

@wizardlyhel Thanks for the reply.
I am following all the points but I am getting a unauthorized error in my console.log though, for this url https://checkout.hydrogen.shop/api/unstable/graphql.json

wizardlyhel · 2024-05-29T15:38:47Z

Make sure the PUBLIC_CHECKOUT_DOMAIN in your .env file and also in storefront custom environment variables isn't set to checkout.hydrogen.shop but instead to the domain url of your own checkout.

If you don't know what that is, navigate to the checkout of your own store and copy that domain value and set it for PUBLIC_CHECKOUT_DOMAIN

johnark88 · 2024-06-04T21:04:28Z

I am currently trying to implement this and have a few questions,

Is this the updated example? - https://github.com/Shopify/hydrogen/tree/main/examples/gtm Looks like some of your links above are 404ing.
From the comments above, its sounds like this should work on our local enviroment (localhost:3000) is that correct?
I just updated to 2024.4.2 and the component is still being exported as UNSTABLE_Analytics is it still Unstable or did I mess something up?
If I want to capture consent using the banner does Analytics.Provider require that I follow the steps on this link https://shopify.dev/docs/api/customer-privacy#installation-on-a-custom-storefront or is there a function in Analytics to capture consent and have a banner?
If our site is not live yet, can I use an Hydrogen staging URL for my PUBLIC_STORE_DOMAIN ?

Thank you!

wizardlyhel · 2024-06-04T22:05:14Z

Is this the updated example? - https://github.com/Shopify/hydrogen/tree/main/examples/gtm Looks like some of your links above are 404ing.
I just updated to 2024.4.2 and the component is still being exported as UNSTABLE_Analytics is it still Unstable or did I mess something up?

We will be releasing in a day or two. That would bring the <Analytics> component stable. Official docs will be replacing the previous examples. You can access the old example from this commit

From the comments above, its sounds like this should work on our local enviroment (localhost:3000) is that correct?

The GTM example won't work exactly on localhost:3000 .. since the link to the gtm file isn't real. Once you replace that with your own, then it should work.

If I want to capture consent using the banner does Analytics.Provider require that I follow the steps on this link https://shopify.dev/docs/api/customer-privacy#installation-on-a-custom-storefront or is there a function in Analytics to capture consent and have a banner?

You don't have to follow that Shopify doc for customer privacy api integration. The <Analytics> component will handle that for you once you supply all required props.

If our site is not live yet, can I use an Hydrogen staging URL for my PUBLIC_STORE_DOMAIN ?

PUBLIC_STORE_DOMAIN is a read-only variable. You won't be able to change this variable value in Oxygen preview or in production. If you are just working locally, you can always use mock.shop like how we setup initially in the skeleton template

wizardlyhel · 2024-06-05T21:31:02Z

Released 2024.4.3 that contains the stable <Analytics> component.

Official docs: https://shopify.dev/docs/storefronts/headless/hydrogen/analytics.

Run h2 upgrade command to bring your project to latest version.

Make sure to replace imports for Unstable_Analytics as Analytics to Analytics, otherwise, you might hit infinite loop loading when viewing app locally.

mattrosno · 2024-06-07T13:58:08Z

Hi @wizardlyhel - I can open an issue if I need to, but when setting customData in the provider like:

<Analytics.Provider
  cart={data.cart}
  shop={data.shop}
  consent={data.consent}
  customData={{foo: 'bar'}}
>

I'm getting undefined in the data in all subscribed events (I tested page_viewed and product_viewed so far.)

Any recommendations? Thanks!

wizardlyhel · 2024-06-07T15:45:52Z

that indeed is a bug - please create an issue so we can track it

wizardlyhel added 2 commits February 21, 2024 14:01

base components

aabf274

other events

9b2ac31

github-actions bot deployed to preview February 22, 2024 19:33 View deployment

fully managed analytics

558ed03

github-actions bot deployed to preview February 23, 2024 21:16 View deployment

clean up

cb017a4

github-actions bot deployed to preview February 23, 2024 21:49 View deployment

clean up

c29a78e

github-actions bot deployed to preview February 23, 2024 22:01 View deployment

add remove cart events

5ac4e35

github-actions bot deployed to preview February 24, 2024 00:28 View deployment

make sure page view is triggered on url search param change

bf489c7

github-actions bot deployed to preview February 26, 2024 18:20 View deployment

wizardlyhel added 2 commits February 27, 2024 15:44

clean up

6e156f1

Merge remote-tracking branch 'origin/main' into hl-analytics-manager

50084d1

github-actions bot deployed to preview February 27, 2024 23:45 View deployment

github-actions bot deployed to preview February 27, 2024 23:46 View deployment

don't use resource route

e54c4f3

github-actions bot deployed to preview February 28, 2024 22:10 View deployment

separated cart analytics

14991ea

github-actions bot deployed to preview February 28, 2024 23:31 View deployment

integrate with customer privacy api

ee45590

github-actions bot deployed to preview March 1, 2024 22:29 View deployment

wizardlyhel changed the title ~~POC - analytics manager~~ POC - analytics provider, customer privacy api and privacy banner Mar 1, 2024

update with working customer privacy api

561c41b

github-actions bot deployed to preview March 6, 2024 20:53 View deployment

remove the need for suspense await for cart

76f59a9

github-actions bot deployed to preview March 7, 2024 21:46 View deployment

clean up and prevent reload firing cart event

4dfc53a

github-actions bot deployed to preview March 7, 2024 23:41 View deployment

wizardlyhel and others added 6 commits April 10, 2024 09:29

missed changes

3b7e948

api doc fix

651b244

update package lock

d724d80

try again

2570c2f

Fix package-lock

c2213e2

fix doc example typescipt

86644de

blittle reviewed Apr 10, 2024

View reviewed changes

packages/hydrogen/src/analytics-manager/AnalyticsProvider.productView.example.tsx Show resolved Hide resolved

frandiox approved these changes Apr 10, 2024

View reviewed changes

packages/hydrogen/src/customer-privacy/ShopifyCustomerPrivacy.tsx Outdated Show resolved Hide resolved

Update packages/hydrogen/src/customer-privacy/ShopifyCustomerPrivacy.tsx

825dbfa

Co-authored-by: Fran Dios <[email protected]>

blittle approved these changes Apr 10, 2024

View reviewed changes

wizardlyhel merged commit f4d6e5b into main Apr 10, 2024
10 of 13 checks passed

wizardlyhel deleted the hl-analytics-manager branch April 10, 2024 17:53

shopify-github-actions-access bot mentioned this pull request Apr 10, 2024

[ci] release 2024-04 #1855

Merged

mattrosno mentioned this pull request Jun 7, 2024

customData from the Analytics.Provider is undefined in the useAnalytics.subscribe() functions #2225

Closed

Kh-Farhan mentioned this pull request Jul 15, 2024

Issue with Tracking Pixel Events Using Shopify Documentation #2328

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Analytics Provider, Customer Privacy API and Privacy Banner #1789

Analytics Provider, Customer Privacy API and Privacy Banner #1789

wizardlyhel commented Feb 22, 2024 •

edited

Loading

frandiox left a comment

jonrrivera commented May 9, 2024

wizardlyhel commented May 9, 2024

j-Riv commented May 13, 2024

wizardlyhel commented May 13, 2024

j-Riv commented May 15, 2024 •

edited

Loading

wizardlyhel commented May 15, 2024

shubhambitqit commented May 28, 2024

wizardlyhel commented May 28, 2024

shubhambitqit commented May 29, 2024

wizardlyhel commented May 29, 2024

johnark88 commented Jun 4, 2024 •

edited

Loading

wizardlyhel commented Jun 4, 2024

wizardlyhel commented Jun 5, 2024

mattrosno commented Jun 7, 2024

wizardlyhel commented Jun 7, 2024

Analytics Provider, Customer Privacy API and Privacy Banner #1789

Analytics Provider, Customer Privacy API and Privacy Banner #1789

Conversation

wizardlyhel commented Feb 22, 2024 • edited Loading

Proposed developer experience

1. Return the consent configuration

2. Add the <Analytics> for facilitating analytics events and instrumenting page view and cart events.

<Analytics> props

3. Add page view event for product, collection, cart, search views.

4. Publish your own custom events

5. Subscribe to analytics events

WHAT is this pull request doing?

HOW to test your changes?

Post-merge steps

Checklist

frandiox left a comment

Choose a reason for hiding this comment

jonrrivera commented May 9, 2024

wizardlyhel commented May 9, 2024

j-Riv commented May 13, 2024

wizardlyhel commented May 13, 2024

j-Riv commented May 15, 2024 • edited Loading

wizardlyhel commented May 15, 2024

shubhambitqit commented May 28, 2024

wizardlyhel commented May 28, 2024

shubhambitqit commented May 29, 2024

wizardlyhel commented May 29, 2024

johnark88 commented Jun 4, 2024 • edited Loading

wizardlyhel commented Jun 4, 2024

wizardlyhel commented Jun 5, 2024

mattrosno commented Jun 7, 2024

wizardlyhel commented Jun 7, 2024

wizardlyhel commented Feb 22, 2024 •

edited

Loading

2. Add the `<Analytics>` for facilitating analytics events and instrumenting page view and cart events.

`<Analytics>` props

j-Riv commented May 15, 2024 •

edited

Loading

johnark88 commented Jun 4, 2024 •

edited

Loading