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.
- In our location template, we have a call-to-action component (
Cta
). Let’s modify that component to useLink
so we can track anyone who clicks on “Get Directions”. 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;
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:
In
PageLayout.tsx
, let’s wrap the header in anAnalyticsScopeProvider
: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”.
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.