import { EkoGallery } from '@ekolabs/eko-gallery-react';

<EkoGallery 
    className="mb-4"
    items={items}
    config={config}
    variantId={variantId}
    onEvent={onEkoGalleryEvent}>
    {/* Your existing product gallery component that will serve as a fallback */}
    <CustomerGalley />
</EkoGallery>

This component accepts the following props:

Prop	Type	Description
className	String	Optional. class names to add to the `EkoGallery` component, for styling purposes for example
items	Array	Array of gallery items that will be rendered by order
config	Object	The eko gallery configuration. This object will be published via the eko platform and exposed via an api endpoint (see below)
variantId	String	Optional. The selected variant (if applicable). It is used to switch to the relevant variant gallery assets when the product variant changes
onEvent	Function	Optional. Handler for events occurred in the eko gallery, for third party tools tracking for example

When passing the onEvent prop, make sure to use the useCallback() hook to avoid unnecessary re-renders.

Config data fetching

To get the eko product configs, you should use the getEkoProductConfigUrl() function to get the url, fetch the data and pass it to the EkoGallery component.

The getEkoProductConfigUrl() receives the eko sales channel id and returns the url to fetch the eko product configs from.

import { getEkoProductConfigUrl } from '@ekolabs/eko-gallery-react';

const EKO_SALES_CHANNEL_ID = process.env.EKO_SALES_CHANNEL_ID;

const ekoProductConfigUrl = getEkoProductConfigUrl(EKO_SALES_CHANNEL_ID);
const ekoProductConfigs = await fetch(ekoProductConfigUrl).then(res => res.json());

Analytics setup

Our 1st party tracking tool should be added in order to track events on the site.

The eko analytics snippet

The eko analytics snippet should be added to the site's head tag, here is an example in Next.js:

// _document.tsx

import Script from 'next/script';
import { getEkoAnalyticsSnippet } from '@ekolabs/eko-gallery-react';

const IS_PRODUCTION = process.env.NODE_ENV === 'production';

render() {
    return (
        <Html lang="en">
            <Head>
                <Script id="eko-analytics-snippet" strategy="beforeInteractive">
                    {getEkoAnalyticsSnippet(IS_PRODUCTION)}
                </Script>
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}

ekoWebPixel

The ekoWebPixel API is used to track the events on your site.

Init once via the init() method:

import { ekoWebPixel } from '@ekolabs/eko-gallery-react';

const IS_PRODUCTION = process.env.NODE_ENV === 'production';

useEffect(() => {
    ekoWebPixel.init(IS_PRODUCTION);
}, []);

Track events via the track() method:

import { ekoWebPixel } from '@ekolabs/eko-gallery-react';

ekoWebPixel.track('pixel.page_viewed', { ... });
ekoWebPixel.track('pixel.product_viewed', { ... });
ekoWebPixel.track('pixel.cart.add', { ... });
ekoWebPixel.track('pixel.cart.remove', { ... });

Report on route changes:

import { ekoWebPixel } from '@ekolabs/eko-gallery-react';

ekoWebPixel.onRouteChanged();

Keywords

FAQs

What is @ekolabs/eko-gallery-react?

Is @ekolabs/eko-gallery-react well maintained?

Package last updated on 17 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install