Brief: Teaser/Promo v. 0.1 [Component]

The teaser component promotes content on another page or site which is complementary to or related to the current page content. 

Use When 

• The content can be understood independently of its surrounding content. 

• You want to track the visibility and click-through of the teaser in Google Analytics  (NB: This is likely to be a separate component wrapper that a teaser is added to) 

Don’t Use When 

• You want to present content that is core to the current page in a visual way. 

• You don’t have one or more calls to action. 

Related/Similar Components 

• Some teaser/promo styles may look like Page Headers however page headers draw focus to page titles and introductory content: teasers/promos draw attention to peripheral content. 

• Image + Text (to be discussed) 

Key Content  

 *Text flexibility and control needs to be discussed more broadly. 

Visual Style 

Heroes and Teasers can come in many different visual styles. They are however categorised into one of four core types. MVP can likely be scoped to deliver a single style option for each. 

Hero Generally limited to the home page only and will often be deeper than other teasers.  

Inline Takes the space of the container they are placed in. Normally these sit towards the bottom of the page as asides, but may sometimes appear within content (e.g. articles) 

Subtle  Similar placement to Inline, but with a more subtle visual style, usually a thin strip. 

Card (Not MVP) Taking the style of more general “article/page cards” but with configurable content and the ability to track. (Content Modelling confirmation needed). This style would likely only be available to a teaser list. 

Behaviour 

• Clicking on a call to action will activate it (link or button) – the whole element itself is not clickable (default) due to its size and the possibility of miss-clicks. This behaviour may adjust for promos/teasers that use the card style. 

• Foreground imagery is disconnected from background imagery and can be positioned independently across breakpoints. 

• It is worth investigating if style decisions can be made programmatically based on the position of where teasers are used. For example, if added to the “Hero” field on the home page, it will take default hero styling. If added to the ‘major’ or ‘minor’ aside fields in the template it could take inline or subtle presentations. This is more of a conversation though around connecting the DS and the CMS content model. 

Editorial 

• Keep headings short, direct and attention-grabbing. 

• Keep descriptions equally concise – tease to encourage the click through. 

• Make CTA text enticing. Avoid phrases like “Read more”. 

Accessibility 

• As independent content, teasers/promos are sectioned content in HTML. On all but the home page, this content is peripheral, so is best defined as <aside>: on the home page, they are core content, so best defined as <article>. By using sectioning elements, it may help to programmatically determine heading levels, as was the initial intention of the HTML Document Outline. 

• Irrespective of the visual layout of the component, the first element in the container should be the heading. This ensures that screen-readers migrating by heading to not skip content that is effectively attributed to the content prior. 

• Even though the content model may include a image description, when imagery is used decoratively (e.g. background image), it must include an empty alt tag (I.e. alt=””) to avoid being read by a screenreader. 

• CTAs will allow for the inclusion of “long descriptions” to be used as aria-labels is CTA text is short. 

Analytics & Data 

• Internally linked teasers can be optionally tracked in Google Analytics as an Internal Promotion. The necessary metadata for the dataLayer is likely to be included in a parent contrainer that references the teaser, so the teaser content itself remains independent.  

Open

• Some special CTA functions such as outbound links, retail referrals, downloads, video activations etc will also require tracking (potentially as part of the CTA block functions). 

• Teasers should have some way of being individually targeted in GTM (e.g. Unique IDs, data-attributes, etc). 

Future Expansion 

• May allow the background image to be replaced with a decorative video (inc background loading & accessible controls.) 

• Teasers will likely need to be added within a “Teaser List” at some point, potentially allowing for outcomes like those pictured below. When this happens, there may be some adjustment needed to ensure that multiple items are not all separately set as asides, but that their parent container is – otherwise we may flood the landmarks list. 

Open

• If teaser that references a product/variant/collection may use the ‘primary pack shot’ as the default foreground image. The product relationship will be included in the tracking meta data. 

• Expect additional style use cases such as applying shape to the content container (see Harpic) and text directly overlaying imagery (see Finish). This may impact the underlying application of divs. 

• Expect that teasers (amongst other components) will require visual theming, based on their context. We have already seen this with product-level colour theming in Finish. 

• If/When we create a “Reference” component for claims and disclaimers, we will be able to separate the disclaimer from this component. 

Wider Conversations that may impact this 

• Breakpoints: nfig 

• Heading control: Configurable (ideally not) vs programmatically determined (preferred) 

• Content sectioning: Appropriate use of <article> <aside> <section> <nav> vs <div> for accessibility and potentially programmatic heading control. Additionally how and if we adjust to landmark sections (e.g. sidebar) vs the specific context of content in a flow (e.g. aside within main). 

• Promotion Tracking: How promotion meta data is linked to content elements and whether it is linked to the whole teaser, or is more generally connected to the CTA block (or both). 

• Style control: Considering a headless CMS ‘technically’ offers no front end control. Unless we significantly lock down style flexibility (possibly an option), how do we intend to allow for style configuration? If needed, can we tokenise layout? (e.g. left/right) or adjust style based on semantics (e.g. product teaser vs content teaser). 

• Text control: Single-line vs multi-line vs restricted RTE vs open RTE. 

• Element targeting in GTM: Enabling GTM triggers to be scoped to individual elements. 

Inspiration from elsewhere 

• AEM Core Component Teaser (Overview) 

• AEM Core Component Teaser (Configuration) 

Teaser / Promo Examples 

Chameleon (Hero)

Gaviscon (Hero)

Dettol

Finish (Hero)

Finish (Inline – full width)

Finish (Subtle) 

Multi-brands (Subtle)

Note that app CTAs do not form part of scope

Air Wick (Inline) 

AirWick’s home page combines a number of inline promotions within a layout pattern. 

Useful links

Open