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

1. In your copy of the React Locations Starter Template , open up the PageLayout.tsx component under src/components.

2. 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 and TemplateProps.
   • Changed the type definition of Props to include templateData.
   • Wrapped the PageLayout component with an analytics provider.

3. Because we changed the props that PageLayout requires, we need to update our usage of PageLayout in location.tsx and static.tsx. In location.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 to static.tsx to ensure the PageLayout component receives its required props.

4. 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 the PageLayout component following the pattern above. Checking out the browser logs may also give a clue about what needs fixing.

5. 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.

   1. At the bottom of the list of network requests, you should see a GET request made to https://yext-pixel.com//….
   2. 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.
      
   

   Note

   This will not be recorded in your production metrics, so don’t worry about muddying your analytics data.

6. 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 the AnalyticsProvider:

   <AnalyticsProvider templateData={templateData} enableDebugging={true}>

7. 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.