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:

1. In PageLayout.tsx, enable tracking cookies by setting the enableTrackingCookie prop on AnalyticsProvider.

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

2. With tracking cookies enabled, any click of our Cta component will now be associated with the _yfdc cookie. To prove this, run npm 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.

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

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

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

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

   1. The CTA click event, which is the same as before.
   2. A new request to the conversion endpoint, which has the cid and cv 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.

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:

1. Instantiated an analytics instance using the useAnalytics hook.
2. 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.
3. 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.