Cookies and Conversion Tracking | Yext Hitchhikers Platform
What You’ll Learn
In this section, you will learn:
- How to enable tracking cookies
- How to set up conversion tracking for Pages
- How to set up visitor analytics for Pages
Tracking Cookies
By using tracking cookies, it is possible to associate user events with a unique cookie id. When tracking cookies are enabled, a cookie will be set in the browser called _yfdc
, and will send the cookie value to the Pages analytics system along with all tracked events.
By enabling cookies, it is possible to link events to a unique cookie ID, which can offer insight into how users interact with your site. For example, it is possible to associate clicks through several Pages of your site with one cookie ID.
Let’s set up a simple example to illustrate:
In
PageLayout.tsx
, enable tracking cookies by setting theenableTrackingCookie
prop onAnalyticsProvider
.<AnalyticsProvider templateData={templateData} enableDebugging={true} enableTrackingCookie={true}>
With tracking cookies enabled, any click of our
Cta
component will now be associated with the_yfdc
cookie. To prove this, runnpm run dev
, navigate to a location page, and click on “Get Directions”. In the network tab of the developer view, you should now see the_yfpc=<cookie_id>
added as a query parameter to the tracking request.The new cookie value is associated with this request and will be recorded by the Pages analytics system, so any future CTA clicks from this browser will be grouped by the same cookie ID.
Try clicking on other CTAs on the page, such as “Order Delivery” and “Order Pickup”. You should see the same
_yfpc
values in the query params for all the analytics requests.
Conversion Tracking
Conversion tracking allows you to associate particular events with a “conversion” in the Yext analytics system. A conversion usually corresponds to an event that drives value for the business. Examples of conversions include purchasing a product, signing up for an event, or registering for a notification.
Conversions are treated as a special event class in the Yext analytics system, and a unique conversion ID (cid
) and conversion value (cv
) is normally associated with these events. The conversion ID is a static value corresponding to an identifier in the Yext system, whereas the conversion value can be determined at event-time.
The conversion value for a check out event could be the total value of items in a shopping cart. Alternatively, the conversion value could be a fixed value which represents an estimated value for a particular event.
To learn more about conversion tracking, check out this module .
Let’s implement simple conversion tracking on one of our CTAs in Turtlehead Tacos:
- To begin, we need to set up a conversion action. Check out this guide to set up a conversion action in the Yext platform. Make sure to select the “Tag” option, so you can include your conversion ID in your code.
Once you have generated a conversion ID, open up
Cta.tsx
and make the following additions:import { Link, useAnalytics } from "@yext/pages/components"; import * as React from "react"; type Cta = { buttonText: string; url: string; style?: string; }; const Cta = (props: Cta) => { const { buttonText, url, style } = props; const conversionData = { cid: "<YOUR_CONVERSION_ID>", cv: "12" } // New return ( <Link 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}`} conversionDetails={conversionData} // New > {buttonText} </Link> ); }; export default Cta;
Now the conversion details will be associated with the CTA click event. The
cv
field represents the conversion value, and can be hard-coded as in the example above or generated at event-time from user inputs e.g. cart total, etc.Let’s verify that the conversion data is being tracked. Ensure your dev server is running and click on the “Get Directions” CTA. In the network tab of your developer tools, you should now see two requests:
- The CTA click event, which is the same as before.
- A new request to the conversion endpoint, which has the
cid
andcv
included in the query params.
The new request looks like below:
The Pages analytics system will automatically relate the event and conversion ID, so you can see that a particular click event corresponded to the conversion.
Visitor Tracking
The Yext Analytics platform also supports visitor-level tracking where it is possible to associate a unique ID to a user. The visitor ID can be generated from login information, cookie information, or other relevant data to uniquely identify a site visitor. For more details on configuring your ID and a general overview of visitor tracking, check out this resource .
Once you have decided on how to identify your visitor, it is simple to associate a visitor with a particular event.
The Yext visitor object has two properties.
Property | Data Type | Description |
---|---|---|
id | string | Unique identifier for a visitor. |
method | string | Label for ID used to identify a visitor. Example: ‘YEXT_COOKIE_ID’ |
Let’s modify our Cta
component to track visitors:
import { Link, useAnalytics } from "@yext/pages/components";
import * as React from "react";
type Cta = {
buttonText: string;
url: string;
style?: string;
};
const Cta = (props: Cta) => {
const { buttonText, url, style } = props;
const conversionData = { cid: "<YOUR_CONVERSION_ID>", cv: "12" }
const analytics = useAnalytics() // New
const visitor = { id: '1234', method: '<YOUR_ID_METHOD>' } // New
return (
<Link
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}`}
conversionDetails={conversionData}
onClick={analytics?.identify(visitor)} // New
>
{buttonText}
</Link>
);
};
export default Cta;
In the above snippet, we made three adjustments:
- Instantiated an analytics instance using the
useAnalytics
hook. - Created an instance of a Visitor object.
- The ID could be determined with front-end logic that pulls data from a cookie or from an authenticated user.
- Set up an onClick event handler to identify our visitor.
The results of these changes are observable in the request sent to the Pages back-end. Restart your dev server if it isn’t running, visit a location page, and click on the ‘Get Directions’.
In the network tab of your developer tools, visitorId
and visitorIdMethod
should now appear as query parameters on the request to “store_pagespixel” in addition to the conversion information we configured earlier.
At this point, we have leveraged cookies to enable conversion tracking and visitor tracking. All of this information will ensure you have great visibility into how your users are interacting with your site.