Track Click Events | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• How to track clicks
• How to associate events with an analytics scope

Set up Click Tracking

Tracking how users click through your site is crucial for assessing the success of your web presence. Fortunately, it is super simple to track clicks.

Any click on a Link component, which is placed under an AnalyticsProvider will register a click event in the Yext analytics system. Let’s set that up.

1. In our location template, we have a call-to-action component (Cta). Let’s modify that component to use Link so we can track anyone who clicks on “Get Directions”.

2. In src/components/Cta.tsx replace the anchor tags with the custom link component provided by the Yext component library.

   // src/components/Cta.tsx
       
   import { Link } from "@yext/pages/components";                         // New
   import * as React from "react";
       
   type Cta = {
     buttonText: string;
     url: string;
     style?: string;
   };
       
   const Cta = (props: Cta) => {
     const { buttonText, url, style } = props;
       
     return (
       <Link                                                              // New
         href={url}
         className={
           `${style}` + " py-4 px-6 text-base font-bold text-white rounded-lg"
         }
         target="_blank"
         rel="noopener noreferrer"
             eventName={`cta Click: ${buttonText}`}                           // New
       >
         {buttonText}
       </Link>                                                            // New
     );
   };
       
   export default Cta;

3. Save your page, ensure your dev server is running, and click the “Get Directions” button on a location page. In your console, you should now see a new event:

   [YextAnalytics]- Tracked Pages event: ctaclickgetdirections

   By using the button text in our event name, we associate a click event with a particular call-to-action for get directions.

Using an Analytics Scope Provider

In addition to detailed information about particular click events, we might also want to group events. For example, we may want to group all clicks in the header of our page to determine how frequently users interact with the navbar.

To group events, we use an AnalyticsScopeProvider and track all click events in our header:

1. In PageLayout.tsx , let’s wrap the header in an AnalyticsScopeProvider:

   import * as React from "react";
   import Site from "../types/Site";
   import Header from "./Header";
   import Footer from "./Footer";
   import {
     AnalyticsProvider,
     AnalyticsScopeProvider                                              // New
   } from "@yext/pages/components";
   import { TemplateProps } from "@yext/pages/*";
       
   type Props = {
     _site: Site;
     children?: React.ReactNode;
     templateData: TemplateProps;
   };
       
   const PageLayout = ({ _site, children, templateData }: Props) => {
     return (
       <AnalyticsProvider templateData={templateData} enableDebugging={true}>
         <div className="min-h-screen">
           <AnalyticsScopeProvider name={"header"}>                      // New
             <Header _site={_site} />
           </AnalyticsScopeProvider>                                     // New
           {children}
           <Footer _site={_site}></Footer>
         </div>
       </AnalyticsProvider>
       
     );
   };
       
   export default PageLayout;

   In the above snippet, we wrapped the header with the scope provider and named the event “header”.

2. To verify this is working, navigate to a page locally and click on a call to action in the header. Clicking on “Order Pickup” generates the following log in the console:

   [YextAnalytics]- Tracked Pages event: header_ctaclickorderpickup

The system has joined the scope provider name and the event name with an underscore. We never explicitly configured the name to user order pickup, but by using the button text in the Cta component, we are getting information about which button is being clicked.

Note

Scope providers can be nested indefinitely and names will be joined by an underscore following the pattern above.