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.

light bulb
Note
Scope providers can be nested indefinitely and names will be joined by an underscore following the pattern above.
unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    How can you quickly verify that analytics are tracked for click events?

    Error Success Question 2 of 2

    What does AnalyticsScopeProvider allow you to do?

    You're a star! ⭐

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Feedback