CTAs | Yext Hitchhikers Platform

Call to actions (CTAs) are a critical component of cards - these are how you prompt a customer to take an immediate action, and ultimately convert. Our built-in cards will have CTAs built in as well, but you can change them to tailor to your needs.

The CTA Object

By default, we can feature up to two CTAs on each card. Each will be defined separately as an object, CTA1 and CTA2. The CTA objects are found in the card > component.js file as they are data mappings.

// The primary CTA of the card
CTA1: {
  label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
  iconName: 'chevron', // The icon to use for the CTA
  url: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // The URL a user will be directed to when clicking
  target: '_top', // Where the new URL will be opened
  eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
  eventOptions: this.addDefaultEventOptions()
  // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
},

Property	Description
`label`	The text of the CTA.
`iconName`	The icon associated with the call to action. This property accepts only one of the enum values available in the SDK. Full list of icon options available can be found in the Icons reference doc .
`iconUrl`	If you want to use a custom icon, you can pass an image reference. You can either hardcode the value or map it to a field on the entity profile. The reference format should either be a web URL or a relative URL to an image you uploaded to your repo.
`url`	The URL of the CTA that users should be directed to when they click it. This is most often pulled from the profile. If you are using a CTA field, you must use the formatter.
`target`	Defines where the CTA opens once a user clicks. See the Target Behavior of Links reference doc.
`eventType`	The event that fires when a user clicks on this call to action. See the Search Analytics Event Types reference doc. This feeds into the “Click Type” dimension in Report Builder.
`eventOptions`	These are additional parameters you can provide for the analytics event fired. You typically will not need to edit this.
`ariaLabel`	Accessible text providing a descriptive label for the CTA

Using Knowledge Graph Fields

You’ll see in the example above, we’re mapping properties to the c_primaryCTA custom field:

The label property maps to the label subfield on the c_primaryCTA field.
The url property uses the built-in formatter to generate the correct URL using the URL and link type subfields on the c_primaryCTA field.

If you’ve created custom fields named Primary CTA and Secondary CTA of type ‘Call to Action’, you can use cards that map to these fields by default (such as the built-in or forked Standard and Accordion cards). You just need to populate these fields in the Knowledge Graph and your CTAs will start appearing.

You can also map these properties to any field on an entity profile you desire!

Use CTA Labels to Differentiate Analytics

The main way to differentiate CTA clicks in Analytics Report Builder is to set the eventType property with different click event types linked above. This feeds into the “Click Type” dimension in Report Builder.

However, if you have multiple CTAs with the same event type and would like to further differentiate the clicks in analytics, you can specify separate CTA labels. This is passed in the analytics request and logged with the event, which then feeds into the “Click Label” dimension in Report Builder. (This is separate from the label that’s displayed in the frontend, which is not passed in the analytics request.)

To set up this extra attribute, navigate to the relevant card’s component.js file. In the CTA object, pass an object with a ctaLabel to the eventOptions attribute, like this:

CTA1: {
  label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
  iconName: 'chevron', // The icon to use for the CTA
  url: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // The URL a user will be directed to when clicking
  target: '_top', // Where the new URL will be opened
  eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
  eventOptions: this.addDefaultEventOptions({ ctaLabel : profile.c_primaryCTA.label })
},

Each CTA can only get one label. Here we used the label that’s displayed in the frontend as the label that will be logged with any click of the CTA. However, you can use any value that you’d like.

For example, you can use a combination of static text with a variable using a field on the entity (in this case entity ID):

dataForRender(profile) {
  var ctaLabelValue = "My custom label - " + profile.entityId;
  return {
    title: profile.name, // The header text of the card
    url: profile.website || profile.landingPageUrl, // If the card title is a clickable link, set URL here
    target: '_top', // If the title's URL should open in a new tab, etc.

    // other fields here      

    // The primary CTA of the card
    CTA1: {
      label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
      iconName: 'chevron', // The icon to use for the CTA
      url: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // The URL a user will be directed to when clicking
      target: '_top', // Where the new URL will be opened
      eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
      eventOptions: this.addDefaultEventOptions({ ctaLabel : ctaLabelValue })
    },
    // other CTA here
  };
}

With this strategy, keep in mind that the entity data in the Knowledge Graph can change. This will cause inconsistencies in your analytics; we’d therefore recommend picking values you expect to remain consistent, like the entity ID (this will depend on how your Knowledge Graph is configured).

Back

< Direct Answers

Standard Branding Elements >

<% elem.innerText %>