Track Analytics Events on Pages Using a Script Tag or Google Tag Manager – Yext Help

This article walks you through two methods for implementing custom Yext Analytics tracking on your site:

Script tag — Install a script in the <head> of your page.
Google Tag Manager — Use the Yext Analytics Browser SDK tag template via a point-and-click interface.

This is particularly relevant for tracking conversion events on your site if you prefer a solution that requires less technical lift than interacting directly with our React SDK.

Option 1: Script Tag Integration

Navigate to Analytics > Integrations and click Embed Code. This opens a modal with the script tag you need to add to your site HTML, along with code samples for two main use cases: integrating basic analytics events and integrating conversion events.

Script tag for basic events

A basic analytics event is any generic action performed by a user, such as a page view, CTA click, or link click, that is not associated with a conversion.

Fire event on page view:

<head>
  <script>
    const analyticsProvider = window.AnalyticsSDK.analytics({
      key: 'YOUR_API_KEY'
    }).with({
      action: 'PAGE_VIEW'
    });
    analyticsProvider.report();
  </script>
</head>

Fire event on click:

<head>
  <script>
    const analyticsProvider = window.AnalyticsSDK.analytics({
      key: 'YOUR_API_KEY'
    }).with({
      action: 'WEBSITE'
    });
    function fireEvent() {
      analyticsProvider.report();
    }
  </script>
</head>
<body>
  <button onclick=fireEvent()>Fire Event</button>
</body>

Script tag for conversion events

Conversion events let you record a monetary value associated with a user action. For example, if someone completes a booking or a transaction on your page.

Fire conversion event on page view:

<head>
  <script>
    const analyticsProvider = window.AnalyticsSDK.analytics({
      key: 'YOUR_API_KEY'
    }).with({
      action: 'PAGE_VIEW',
      value: {
        amount: 21.0,
        currency: 'USD'
      }
    });
    analyticsProvider.report();
  </script>
</head>

Fire conversion event on click:

<head>
 <script>
   const analyticsProvider = window.AnalyticsSDK.analytics({
     key: 'YOUR_API_KEY'
   }).with({
     action: 'WEBSITE',
     value: {
       amount: 21.0,
       currency: 'USD'
     }
   });
   function fireEvent() {
     analyticsProvider.report();
   }
 </script>
</head>
<body>
 <button onclick=fireEvent()>Fire Event</button>
</body>

Note: You must specify both value.amount and value.currency for a conversion event to be valid. The amount can be zero.

You can also modify the above code snippet to fire when a user interacts with a different element on the page by simply replacing the button HTML with the code for that event handler.

Additionally, these code snippets are just basic examples of analytics events. You can modify these snippets to include any number of fields that the Events API accepts.

Debugging

To debug the script tag implementation, open your browser's developer console, click the Network tab, and search for events. A valid analytics event will return an analytics event ID in the Preview tab. An invalid event will return an analytics event ID and an error message with a description of the error.

Option 2: Google Tag Manager

Step 1: Install Google Tag Manager on your website

If you are already using Google Tag Manager, this step is complete. If you are new to Google Tag Manager or installing on a new domain, copy the installation code snippets from the GTM-XXXX link in the top right corner of your Google Tag Manager home screen and add them to your site.

If you need additional assistance with this step, you can visit Google’s Tag Manager Developer Quick Start Guide.

Step 2: Download the Yext Analytics Browser SDK Tag Template

Download the Yext Analytics Browser SDK tag template from the Yext GTM GitHub repo by clicking the download icon.

Step 3: Upload the Tag Template to Google Tag Manager

Log into your Google Tag Manager account.
Click Templates in the left navigation bar.
In the Tag Templates box, click New. This should open the Template Editor window.
Click the dot icon next to Save and click Import.
Select the tag template file you downloaded. Yext Analytics Browser SDK should appear in the Tag Preview window.
Click Save.

Step 4: Create a New Tag

Click Tags in the left navigation bar.
Click New.
Click the pencil icon in the Tag Configuration box. This is where you configure your tag, including its type and what should trigger it to fire.
Search for Yext Analytics Browser SDK and select it.

Step 5: Configure the Tag

Fill out the tag configuration. All properties are required unless stated otherwise.

For a basic event:

Select Basic from the Event Type dropdown.
Enter your Yext API Key.
Select your Cloud Region (US or EU).
Select whether to Enable Session Tracking.
Select an Action Type (Standard or Custom) and choose or enter your action.

For a conversion event:

Select Conversion from the Event Type dropdown.
Enter your Yext API Key.
Select your Cloud Region (US or EU).
Select whether to Enable Session Tracking.
Enter a Conversion Value (defaults to 0) and Conversion Value Currency (defaults to USD).
Select an Action Type (Standard or Custom) and choose or enter your action.

To use a dynamic conversion value from a dataLayer variable, click the icon to the right of the Conversion Value field and select your variable.

Setting Dynamic Conversion Values

If your conversion value varies by user, for example, the total of a shopping cart at checkout, you can pull it in dynamically using a Google Tag Manager dataLayer variable instead of hardcoding a static value.

Step 1: Add a dataLayer to your website

Add the following code to your site wherever you want to fire the conversion tag:

<script>
  dataLayer = [];
  dataLayer.push({'variableName': document.getElementbyId("elementIdName").value});
</script>

dataLayer = [] creates an array to store the variable you want to capture (in this case, your conversion value).
dataLayer.push() pushes the variable (here, variableName) and its value (looked up by element ID) into Google Tag Manager.

Step 2: Configure the dataLayer variable in Google Tag Manager

Click Variables in the left navigation bar.
Click New in the User-Defined Variables tile.
Click the Variable Configuration tile and select Data Layer Variable.
Enter the variable name you used in your dataLayer (e.g., variableName).
Go back to your Yext Analytics Browser SDK tag and select this new variable in the Conversion Value field.

See Google's dataLayer documentation for more detail.

Step 6: Configure the Trigger

Click on the Triggering box.
Click the plus sign to add a new trigger or select an existing one.
Click on the Trigger Configuration box and select the appropriate trigger type for your use case (page view, click, user engagement, etc.).
Click Save to save the trigger, then click Save again to save the tag.

Debugging

To debug directly in GTM, use the Tag Assistant debugger.