Working with Knowledge Tags
This guide will walk you through the steps to add Knowledge Tags to your website.

Overview

There are three components of Knowledge Tags:
  • Schema.org markup: Add perfect, always-up-to-date schema.org markup to any webpage via a <script> tag.
  • Customer-facing content: Pull content from the Knowledge Graph and display it on your website via embed codes. Note, you need to add the <script> tag to your page in order to use the embed codes.
  • Analytics: Pull website analytics directly into Yext Analytics.

Step 1: Add schema.org markup to your pages using the <script tag>

To start, you will need to add the Knowledge Tags <script> tag to your webpage. This is the only step you need to take to add schema.org markup to your page. All of the additional steps are optional to add additional content to the page.

When adding this script tag to your page, you want to add this <script> tag before the closing </head> tag on your page.

To access the <script> tag:
  1. Log into your Yext account and click Pages in the top navigation bar.
  2. Click on the Knowledge Tags sub-tab. 
  3. Click on the Add Knowledge Tags to Website button. A dialog box appears.
For full instructions on configuring Knowledge Tags to include custom schema.org markup or Conversion Tracking, see here.

You can see an example script tag below: 
<script async defer src="https://knowledgetags.yextpages.net/embed?key=KamUQv_w3FGCPdUOneIuxCd5ZCujvj0Q0bZZlicqyXDy1RoypsxzzmTLfmT3JJQP&account_id=012345&entity_id=815&locale=es" type="text/javascript"></script>
The <script> tag includes the following parameters:
  • key: This is used to enable the Tags JavaScript implementation. This key is found in the Knowledge Tags section of the Yext platform.
  • entity_id: The ID of the relevant entity. This identifies the entity whose data to use for schema.org markup and content.
  • account_id: For direct customers, the Account ID can be found in the Account Settings section of the account.
    • If you are using the Partner Portal, the account_id is the ID found in the Yext Customer ID column in the Partner Portal, corresponding to a particular client.
  • locale: This optional parameter specifics which language profile to retrieve content from.
    • Note, this is only applicable if you’re using our Multi-Language Profile feature.
If your page includes multiple entities, you can create one <script> tag that includes multiple entities, by adding the additional entity IDs to the script in the following format:
<script async defer src="https://knowledgetags.yextpages.net/embed?key=KamUQv_w3FGCPdUOneIuxCd5ZCujvj0Q0bZZlicqyXDy1RoypsxzzmTLfmT3JJQP&account_id=012345&entity_id=4&entity_id=815&locale=es" type="text/javascript"></script>
Note, when using a <script> tag that includes multiple entities, it will only take the first locale and apply it to all entities.

Configuring the default schema.org markup

The <script> tag will automatically add the relevant schema.org markup to your page for the given entity type. However, because custom entities don’t have a set of predefined Knowledge Graph fields, you will need to manually configure the schema.org markup on these pages to ensure that they are eligible for rich search results. For information on how to adjust the schema.org markup for your entities, see Customize Schema.org Markup Using Knowledge Tags  

Step 2: Add customer-facing content with embed codes

You can use the following embed tag to display any content from the Knowledge Graph on a webpage. Note, you must add the <script> tag to your page before you can leverage the embed codes to add content.
<span data-yext-field="name"></span>
To select a field from Yext, update the value of data-yext-field to the API name of the field you want to display. In the example above, we are displaying the Name field. To locate the API names for entity fields:
  1. Log into your Yext account and hover over your name in the top corner and click Account Settings.
  2. Click Manage Entity Types in the sidebar and click View Details next to the desired entity type. Under each field name you will see the API name for each field.

Pages with Multiple Entities

If your page displays content for multiple entities, make sure your embed codes also include the data-yext-id property that specifies which entity’s data should be used in the tag. For example:

If your page is for one entity, the address code will look like this: 
<span data-yext-field="address.line1"></span>
If your page displays multiple address fields, the address code for each address will like look this:
<span data-yext-field="address.line1" data-yext-id="815"></span>
 

Custom fields

To display content stored in Custom Fields on your pages, you can create embed codes using the following format:
<span data-yext-field="c_myCustomField"></span>
Here, c_myCustomField is the API Name of the custom field and the HTML Tag (in this example, the <span>) will differ depending on the field type.  

List fields

To display a list type field on your page, you can use any of the following HTML tags to display content from list field types on your page: 
  • <ul> — bulleted lists
  • <ol> — numbered lists
  • <span> — comma-separated list on one line
  • <div> — creates a series of <div> elements, each on a separate line
For example, to display a bulleted list of your products, you would use the following embed tag:
<ul data-yext-field=”products”></ul>
To display a custom field that contains a list you would use the following:
<ul data-yext-field="c_listField"></ul>
 

Additional Fields

Below you will find a list of some of the fields that can be used to embed content onto pages. These fields are being highlighted, as Knowledge Tags returns the data in a specific format.
Field Name Embed Tag Display
Hours
<span data-yext-field="hours"></span>
Monday 12:00pm – 11:00pm
<span data-yext-field="hours-monday"></span>
12:00pm – 11:00pm
Holiday Hours
<span data-yext-field="holidayHoursFormatted"></span>
Saturday, July 2, 2020 Closed
Address
<span data-yext-field="address.line1"></span>
1 Madison Avenue
Meals Served
<span data-yext-field="mealsServed"></span>
List of selected options (e.g., Breakfast, Lunch, Brunch, Dinner, Happy Hour, Late Night
<span data-yext-field="mealsServed[0]"></span>
Specific option (e.g., BREAKFAST)
Email
<span data-yext-field="email"></span>
info@contact.com
Get Directions Link
<span data-yext-field="get-directions-link"></span>
Get Directions (link leads to Google Maps targeting the address)
Logo
<span data-yext-field="logo.url"></span>
 
Google Attributes
<span data-yext-field="googleAttributesFormatted"></span>
List of relevant attributes separated by commas (e.g., Is owned by women, Offers online classes)
Event Start Date and Time
<span data-yext-field="start-datetime"></span>
October 5, 2020 at 1:00:00 PM
Event End Date and Time
<span data-yext-field="end-datetime"></span>
October 5, 2020 at 4:00:00 PM
 

Step 3: Verify the schema.org markup for the page

Once you have added the relevant tags to your website, you should verify that the schema.org markup on your page is correct. To do this, from the Knowledge Tags sub-tab in the Yext platform:
  1. Click on the Scan URL button. A dialog box appears.
  2. Enter the URL of the webpage and click Check Schema on Google. This will open Google’s Structured Data Testing Tool and display the detected schema.org markup.

Step 4: Monitor and Maintain

In the Knowledge Tags page in the platform, you can view the list of URLs for each page you have added the script tag to. Next to each URL you will see the Last Activity Date. This displays the most recent date and that time a user has viewed that page with Knowledge Tags on it.

If at any point this date is not what you are expecting, or the tag has not been seen recently, we recommend reviewing that website to make sure the tags are installed correctly.  

Step 5: Track Additional Analytics

By default, page views will be tracked automatically when you add the script tag to a webpage. Additionally, the number of times a user clicks or taps “Call” or “Get Directions” on a page will also automatically be tracked if you use the corresponding embed codes. 

To track more events, you can use our JavaScript library directly. To trigger an event through your own JavaScript, follow the model below:
Yext.customEvent('EVENT_NAME', "entity_id")
If you want to call the standard events (e.g., “Get Directions” or “Phone Call”) via the JavaScript library, use the following event names:  GET_DIRECTIONS
Yext.customEvent('GET_DIRECTIONS', "entity_id")
TAP_TO_CALL
Yext.customEvent('TAP_TO_CALL', "entity_id")
For example, to track analytics for a button click for an entity with the Entity ID of 815, your script tag would look like this:  
<script>
function buttonClickFunc(){
Yext.customEvent('button_clicked', "815")
}
</script>
<a onclick="buttonClickFunc()">Click me!</a>