This doc walks you through how to use the Yext Analytics Library to add click analytics to your Search experience. The Analytics Library works with any frontend framework.

Step 1: Install the Analytics Library

Package Manager (Recommended)

Yext Analytics is available via npm or yarn:

npm i @yext/analytics

yarn add @yext/analytics

Local Install

If you require additional customization or need to fork the library, you can download the source code and reference it in your file structure.

Code Sandbox Vanilla JS Example

To play around with the library and its types, you can follow along using Code Sandbox:

1. Create a new Code Sandbox using the "Vanilla Typescript" template.
2. Under the Dependencies section on the left, search for @yext/analytics and install it.

Step 2: Import the Library

Import and initialize the core library in your application:

import { provideAnalytics } from '@yext/analytics';

The bundle is ES6 compatible.

Code Sandbox example - in your index.ts file, import the library and remove the boilerplate content:

import { provideAnalytics } from '@yext/analytics';

Step 3: Create an Analytics Request

1. Initialize the Analytics Library

In the body of your application, initialize the analytics library with your Experience Key, Experience Version, and Business ID:

const analytics = provideAnalytics({
  experienceKey: '<one of your experience keys>', // example: answers-js-docs
  businessId: '<your business id>',               // example: 3350634
  experienceVersion: 'PRODUCTION'
});

2. Fire an Analytics Event

Now that the Analytics Library has been initialized, fire a Search analytics event:

analytics.report({
  type: "CTA_CLICK",
  entityId: '1',
  verticalKey: 'people',
  searcher: 'VERTICAL',
  queryId: '95751527-9db6-4859-8278-60d1c060b6c0'
});

For a full list of event types you can use, see the Search Analytics Event Types reference doc.

3. Putting It All Together

The complete index.ts file will look like this:

import { provideAnalytics } from '@yext/analytics';

const analytics = provideAnalytics({
  experienceKey: '<one of your experience keys>', // string, example: 'answers-js-docs'
  businessId: <your business id>,                 // number, example: 3350634
  experienceVersion: 'PRODUCTION'
});

analytics.report({
  type: "CTA_CLICK",
  entityId: '1',
  verticalKey: 'people',
  searcher: 'VERTICAL',
  queryId: '95751527-9db6-4859-8278-60d1c060b6c0'
});

You can verify the event is firing by checking the network tab in your browser's developer tools and looking for the analytics request.

Next Steps

To learn more, explore the library's GitHub repository and the Search Analytics Event Types reference doc.