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
},

Using Knowledge Graph Fields

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