Calls to Action
At times, as an In-Depth producer, you will want to elicit specific actions from the reader. Perhaps there is a valuable sidebar to read or an important document to highlight. Maybe this is the perfect spot to encourage someone to subscribe. Calls to action are simple but polished components perfect for highlighting these opportunities to the reader. The CTA inherits theme and text colors from the in-depth configuration.
Do it in Presto
CTAs use the asset replacement technique, and require a Presto asset. We recommend an embed with a text link referencing the content you wish highlight in the CTA.
Usage best practice
It is important to carefullly consider each CTA's impact on a story's pacing. Every element in a story, from images to CTAs and more, ask for a piece of a reader's finite attention. The more things there are in a story, the more divided a reader's attention becomes. Too many things creates a cluttered, disjointed and unenjoyable experience. Be sure that each CTA presents valueable information that adds value to either the storytelling (such as sidebars) or the overall customer experience (such as subscription CTAs).
What about AMP and Apple News?
CTAs only will appear on our websites and not Google AMP, Apple News and other distributed platforms.
Configuration
Required
These are the primary elements of the CTA and are required to make a functional one.
| Value | Purpose |
|---|---|
storytellingComponent |
Must be "CTA" for a call to action to render |
text |
The main text of the CTA |
buttonText |
The text of the button, such as "Read more" or "Subscribe!" |
buttonLink |
When the user clicks the button, this is where they go. (More on this below) |
Optional
These add value and polish to a CTA, but are not required.
| Value | Purpose |
|---|---|
position |
Like all in-depth assets, the CTA can be placed in a rail container. Options are 'rail-left' and 'rail-right' |
image |
The CDN link for an image to be displayed in the CTA. When configured, this will prevent the logo from displaying. |
imageAlt |
The alt text for the image. If you use an image, please provide alt text. Be an a11y. |
logo |
When set to true, the property logo will be displayed in the CTA. This is especially useful for subscription CTAs. The logo will not display if an image is configured. The option also accepts values of "white" or "black" to render the logo as such in cases where USAT blue would clash. |
textSecondary |
A secondary label which displays below/beside the button. |
Examples:
{assets.123456789}
position: right-rail
storytellingComponent: CTA
text: This is very important journalism. Please support us.
buttonText: Subscribe
buttonLink: https://offers.jconline.com/
logo: true
textSecondary: Special offers are available
{}
{assets.123456789}
position: left-rail
storytellingComponent: CTA
text: Check out this awesome sidebar database! It's dope.
buttonText: More
buttonLink: usatoday.com/really/cool/graphic
image: https://www.gannett-cdn.com/media/2018/05/16/USATODAY/USATODAY/636620603757851567-Mention06.JPG?width=1800
imageAlt: Portrait of Marco Mention
{}
About the link
The CTA supports several different types of links. These should be rigorously tested before publishing a story:
Absolute URLs
This is a link to the exact place you want the readers to go. These links must begin with http or https to work. For example: https://www.jsonline.com/this/really-cool-database/is/cool.
Relative URLs
If the domain is the same, the domain can be omitted. These urls must begin with a /. For example, /this/really-cool-database/is/cool. The benefit to relative URLs is a persistent domain -- a visitor to cincinnati.com would be sent to https://cincinnatti.com/this/really-cool-database/is/cool, while a visitor to jsonline.com would be sent to https://jsonline.com/this/really-cool-database/is/cool. This is suitable for content available on all network sites.
Dynamic domains
Similar to relative urls, the buttonLink property accepts a placeholder for the domain, and replaces it with wherever the visitor is. For example, a buttonLink configured as https://graphics.{{d}}.com/really/cool/graphic becomes a link to https://graphics.usatoday.com/really/cool/graphic (if the visitor is reading the story on usatoday.com).
Visually-enhanced CTAs
For more advanced control over adding an image or video to a CTA, see Visually-enhanced display.
Analytics and link tracking
The following Omniture analytics events are fired by each CTA:
- When the CTA scrolls into view:
in-depth-in-view-cta-{assetID} - When the CTA button is clicked:
in-depth-cta-button-click-asset-{assetID}
Be sure you know if people are clicking on your links. UTM parameters are a good way of tracking the effectiveness of your linked content. Reach out to anyone in the Storytelling Studio for help with this.