ShopifyAnalytics.js

ShopifyAnalytics.js

import Script from 'next/script';
import { useCallback, useEffect } from 'react';
import isClient from '@/utils/isClient';
import {
    AnalyticsEventName,
    AnalyticsPageType,
    getClientBrowserParameters,
    sendShopifyAnalytics,
    ShopifySalesChannel,
    useShopifyCookies,
} from '@shopify/hydrogen-react';

function useShopifyAnalytics() {
    const idNumber = process.env.NEXT_PUBLIC_SHOPIFY_STORE_ID_NUMBER;
    const checkoutDomain = process.env.NEXT_PUBLIC_SHOPIFY_CHECKOUT_DOMAIN;

    const trackPageView = useCallback(
        (payload = { pageType: AnalyticsPageType.home, resourceId: null, collectionHandle: null }) => {
            if (!idNumber || !checkoutDomain) return;

            console.info('ShopifyAnalytics.trackPageView()', payload);

            sendShopifyAnalytics(
                {
                    eventName: AnalyticsEventName.PAGE_VIEW,
                    payload: {
                        ...getClientBrowserParameters(),
                        shopId: `gid://shopify/Shop/${idNumber}`,
                        currency: 'USD',
                        shopifySalesChannel: ShopifySalesChannel.headless,
                        acceptedLanguage: 'en',

                        /**
                         * TODO:
                         * Manage these properties with a consent management solution
                         */
                        hasUserConsent: true,
                        analyticsAllowed: true,
                        marketingAllowed: true,
                        saleOfDataAllowed: true,

                        ...payload,
                    },
                },
                checkoutDomain
            );
        },
        []
    );

    const trackCartUpdate = useCallback((cartId) => {
        if (!idNumber || !checkoutDomain) return;
        if (!cartId) return;

        console.info('ShopifyAnalytics.trackCartUpdate()', cartId);

        sendShopifyAnalytics(
            {
                eventName: AnalyticsEventName.ADD_TO_CART,
                payload: {
                    ...getClientBrowserParameters(),
                    shopId: `gid://shopify/Shop/${idNumber}`,
                    currency: 'USD',
                    shopifySalesChannel: ShopifySalesChannel.headless,
                    acceptedLanguage: 'en',

                    /**
                     * TODO:
                     * Manage these properties with a consent management solution
                     */
                    hasUserConsent: true,
                    analyticsAllowed: true,
                    marketingAllowed: true,
                    saleOfDataAllowed: true,

                    cartId,
                },
            },
            checkoutDomain
        );
    }, []);

    return {
        trackPageView,
        trackCartUpdate,
    };
}

/**
 * Shopify Analyctis page tracking
 *
 * Example:
 * useShopifyAnalyticsTrackPageView({ pageType: AnalyticsPageType.product, resourceId: product.id });
 *
 * @param {object} payload
 * @param {object.pageType} page type defined in AnalyticsPageType from @shopify/hydrogen-react
 * @param {object.resourceId} resource id e.g. product or collection ID in the gid:// format. Mandatory when tracking products or collections
 * @param {object.collectionHandle} collection handle. Only used when tracking collections
 */
function useShopifyAnalyticsTrackPageView(payload) {
    const { trackPageView } = useShopifyAnalytics();
    useEffect(() => {
        if (payload?.pageType || payload?.resourceId) trackPageView(payload);
    }, [payload?.pageType, payload?.resourceId, trackPageView]);
}

const ShopifyAnalytics = () => {
    const frontendDomain = process.env.NEXT_PUBLIC_SHOPIFY_FRONTEND_DOMAIN;
    const checkoutDomain = process.env.NEXT_PUBLIC_SHOPIFY_CHECKOUT_DOMAIN;
    const apiToken = process.env.NEXT_PUBLIC_SHOPIFY_API_PUBLIC_ACCESS_TOKEN;

    useShopifyCookies({
        hasUserConsent: true,
        domain: frontendDomain,
        checkoutDomain: checkoutDomain,
    });

    const onLoad = useCallback(() => {
        if (isClient && window?.Shopify?.customerPrivacy) {
            window.Shopify.customerPrivacy.setTrackingConsent(
                {
                    marketing: true,
                    analytics: true,
                    preferences: true,
                    sale_of_data: true,
                    headlessStorefront: true,
                    checkoutRootDomain: checkoutDomain,
                    storefrontRootDomain: frontendDomain,
                    storefrontAccessToken: apiToken,
                },
                () => {}
            );

            console.info(
                'Shopify Customer Privacy API',
                'loaded API',
                window?.Shopify?.customerPrivacy?.currentVisitorConsent()
            );
        }
    }, [isClient]);

    return (
        <>
            <Script
                src="https://cdn.shopify.com/shopifycloud/consent-tracking-api/v0.1/consent-tracking-api.js"
                onLoad={onLoad}
            />
        </>
    );
};

export { ShopifyAnalytics, useShopifyAnalytics, useShopifyAnalyticsTrackPageView };