Set Up an Analytics Provider | Yext Hitchhikers Platform
What You’ll Learn
In this section, you will learn:
- How to set up an Analytics provider
- How to debug analytics during local development
- How to configure opt-in tracking
Overview
AnalyticsProvider
is the fundamental analytics component, which establishes a scoped analytics context in which events can be tracked.
For the Turtlehead Tacos demo site, we want to track events across all pages, so we will install an Analytics Provider on all of our pages. Manually installing across all templates would be tedious and error prone if you have a large site, so we recommend to configure the provider in a wrapper component, like PageLayout
which wraps every Page.
In Turtlehead Tacos, the PageLayout
component is used in both of our template modules, and would likely be used in any future templates we might add. It is a perfect place to set up the analytics provider.
Configure the Provider
In your copy of the React Locations Starter Template , open up the
PageLayout.tsx
component undersrc/components
.The page layout component wraps the page contents with a header and footer, so we will place the AnalyticsProvider around the entire component. Add the following lines of code:
import * as React from "react"; import Site from "../types/Site"; import Header from "./Header"; import Footer from "./Footer"; import { AnalyticsProvider } from "@yext/pages/components"; // New import { TemplateProps } from "@yext/pages"; // New type Props = { _site: Site; children?: React.ReactNode; templateData: TemplateProps; // New }; const PageLayout = ({ _site, children, templateData }: Props) => { return ( <AnalyticsProvider templateData={templateData}> // New <div className="min-h-screen"> <Header _site={_site} /> {children} <Footer _site={_site}></Footer> </div> </AnalyticsProvider> // New ); }; export default PageLayout;
With the above additions, we have done three things:
- Imported two new dependencies:
AnalyticsProvider
andTemplateProps
. - Changed the type definition of
Props
to includetemplateData
. - Wrapped the
PageLayout
component with an analytics provider.
- Imported two new dependencies:
Because we changed the props that
PageLayout
requires, we need to update our usage ofPageLayout
inlocation.tsx
andstatic.tsx
. Inlocation.tsx
make the following changes:// src/templates/location.tsx ...truncated for clarity... const Location: Template<any> = ({ // New document, __meta }) => { const { _site, name, address, openTime, hours, mainPhone, geocodedCoordinate, services, } = document; return ( <> <PageLayout _site={_site} templateData={{__meta, document}}> // New <Banner name={name} address={address} openTime={openTime}> ...truncated for clarity...
Here we make a simple refactor to pass the templates props into the
PageLayout
component. Make the same refactor tostatic.tsx
to ensure thePageLayout
component receives its required props.Let’s do a quick sanity check. If you aren’t running your dev server, run:
npm run dev
Navigate to
localhost:5173
and ensure that both the static homepage and the streams-powered locations pages are appearing. If the pages are not are not showing up, make sure you are passing the correct props into thePageLayout
component following the pattern above. Checking out the browser logs may also give a clue about what needs fixing.At this point, the screens will not look any different, but if we open the network tab in our browser, we can see that a page view event has been registered. Open your browser’s developer tools, click on the network tab, and navigate to
localhost:5173/turtlehead-tacos
.- At the bottom of the list of network requests, you should see a GET request made to
https://yext-pixel.com//…
. - If you inspect the query parameters on the request, you will see
eventType=pageview
. This means that a page view event is being sent to the Yext analytics system.
NoteThis will not be recorded in your production metrics, so don’t worry about muddying your analytics data.- At the bottom of the list of network requests, you should see a GET request made to
Because we have configured the analytics provider at a “global” level, page view events should also be tracked on all location pages. We’ll verify this is working, but first, let’s enable debug mode. Enabling debug will make it easier to see logs of analytics events. In
PageLayout.tsx
add the following prop to theAnalyticsProvider
:<AnalyticsProvider templateData={templateData} enableDebugging={true}>
With debugging enabled, open up your browser’s console and navigate to a location page. You should now see a log from Yext Analytics that looks something like:
[YextAnalytics]- Tracked Pages event: PAGE_VIEW
Now it will be easy to verify that all our events are being tracked. When you are ready to deploy to production, it is a good practice to disable debugging mode.
Opt-In Tracking
The AnalyticsProvider
also allows for opt in functionality. Depending on compliance requirements (GDPR provisions, for example), users may need to explicitly opt in to tracking. This functionality is easily achieved with the requireOptIn
prop.
The example below requires users to consent to analytics tracking:
// src/components/PageLayout.tsx
...
const PageLayout = ({ _site, children, templateData }: Props) => {
return (
<AnalyticsProvider templateData={templateData}
enableDebugging={true}
requireOptIn={true}> // New
<div className="min-h-screen">
<Header _site={_site} />
{children}
<Footer _site={_site}></Footer>
</div >
</AnalyticsProvider>
);
};
export default PageLayout;
With requireOptIn
set to true, the system will not record any analytics events. After saving the changes to PageLayout.tsx
, visit a page deploy locally and no event will show in the console.
Depending on regulatory requirements, you can now present the user a button, which will toggle on the requireOptIn
prop to permit analytics tracking once consent has been given.
Now we can track page views and easily determine if events are being tracked. With the provider in place, we can implement more granular forms of tracking.