Skip to content

Example components to implement Klaviyo web tracking in a Shopify Hydrogen storefront

License

Notifications You must be signed in to change notification settings

jon-batscha/klaviyo-shopify-hydrogen-example

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

klaviyo-shopify-hydrogen-example-code

This repository contains sample code components for enabling client side tracking functionality for the Klaviyo/Shopify integration, specifically onsite tracking for a Hydrogen storefront to supplement the prebuilt Klaviyo/Shopify integration that relies the Shopify backend. This guide assume you have read the Integrate with a Shopify Hydrogen store developer guide and have already connected Klaviyo’s native Shopify integration.

The example code is based on the Hydrogen Demo Store as an easy-to-use baseline for any Hydrogen-powered storefront.

Adding the Code

Copy the klaviyo folder into the src/components directory of your root project folder. This directory contains three client files.

  • KlaviyoOnsite.client.jsx - Enables loading the Klaviyo onsite script for track/identify requests and sign-up forms. Also enables subscriptions to various on site analytics. Make sure to change the API_KEY to your Klaviyo public API key.
  • KlaviyoPublishProductView.client.jsx - Publishes a product view metric. To be added on project page.
  • KlaviyoIdentify.client.jsx - Enables Klaviyo to identify a user for onsite event tracking.

Adding the Initial Script

In src/components/Layout.server.jsx import the KlaviyoOnsite component and add at the end of the <LocalizationProvider /> tag:

import KlaviyoOnsite from './klaviyo/KlaviyoOnsite.client';
// Omitted
export default function Layout({children, hero}) {
    // Omitted
    return (
        <LocalizationProvider preload="*">
            Omitted
            <KlaviyoOnsite />
        </LocalizationProvider>
    );
}

Adding Product Publishing for Viewed Product and Viewed Item Tracking

The example code makes use of Hydrogen Analytics. VIEWED_PRODUCT event to be triggered, which can be done with Hydrogen's built in ClientAnalytics. For example in src/components/ProductDetails.client.jsx add the following function and add to the end of ProductProvider:

import KlaviyoPublishProductView from './klaviyo/KlaviyoPublishProductView.client';
// Omitted
export default function ProductDetails({product}) {
    // Omitted
    return (
    <>
        <ProductProvider data={product} initialVariantId={initialVariant.id}>
            // Omitted
            <KlaviyoPublishProductView />
        </ProductProvider>
    </>
    );
}

Note: The product context is assumed to be at the variant product level to have access to properties such as selectedVariant.

Adding Collections to Product Query

Klaviyo also tracks product collection titles, which is not part of the example GraphQL query in the demo-store. If you're using the Shopify demo-store, the addition would look like the following:

const QUERY = gql`
    query product(
        $country: CountryCode
        $language: LanguageCode
        $handle: String!
    ) @inContext(country: $country, language: $language) {
        product: product(handle: $handle) {
            # Omitted
            # Adding first 10 collection titles for given product to query
            collections(first: 10) {
                edges {
                    node {
                        title
                    }
                }
            }
            # Omitted
        }
    }
    `;

Identifying Users

Klaviyo has multiple ways to identify users for onsite tracking. One such way is when the account details pages is accessed/the user logs in or creates an account. In src/components/account/AccountDetails.server.jsx add the KlaviyoIdentify component:

import KlaviyoIdentify from '../klaviyo/KlaviyoIdentify.client';
// Omitted

export default function AccountDetails({customerAccessToken}) {
    // Omitted
    return (
        <Layout>
            // Omitted
        <KlaviyoIdentify customer={customer} />
        </Layout>
    );
}

About

Example components to implement Klaviyo web tracking in a Shopify Hydrogen storefront

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%