Sticky CTA
Sticky CTA
The XAFStickyCTA component renders a floating buy button at the bottom (or top) of the viewport that appears automatically when the original <XAFBuyButton> scrolls out of view. This captures the 5–15% conversion lift that long reviews lose when readers scroll past the buy button.
Component
<XAFStickyCTA />
<template>
<article>
<XAFArticleDisclosure :published-at="review.publishedAt" />
<XAFHero :product-name="review.title" :link="mainLink" :rating="review.rating" />
<XAFBuyButton :link="mainLink" position="hero" /> <!-- tracked by StickyCTA -->
<!-- 4000 words of review content... -->
<XAFStickyCTA :link="mainLink" :product-name="review.title" :price="mainLink.price" />
</article>
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
link | AffiliateLink | required | Buy-button link data. |
watchSelector | string | '[data-xaf-buy-button]' | Selector for the original buy button to track. When this scrolls out of view, the sticky CTA appears. |
position | 'bottom' | 'top' | 'bottom' | Sticky position. |
productName | string | Optional product name shown next to the CTA. | |
price | number | Optional price to show. |
How it works
XAFStickyCTA uses an IntersectionObserver to watch the element matched by watchSelector (default: any element with the data-xaf-buy-button attribute — which <XAFBuyButton> automatically adds). When the original CTA leaves the viewport, the sticky CTA fades in. When the original re-enters, it fades out.
Tracking: the sticky CTA emits clicks with position="sticky" so you can split-test sticky vs in-content clicks in GA4.
Pair with useAffiliateImpression()
For full view-through conversion tracking, pair with the useAffiliateImpression composable:
<script setup>
const { el, impressed } = useAffiliateImpression({
merchant: 'amazon',
position: 'sticky',
label: 'K1 keyboard',
})
</script>
<template>
<XAFStickyCTA ref="el" :link="..." />
</template>
This fires affiliate_impression to dataLayer when the sticky CTA enters the viewport — letting you measure view-through conversion, not just click-through.
AI Context
component: XAFStickyCTA
package: "@xenterprises/nuxt-x-affiliate"
use-when: >
At the bottom of every review page (after all content). Captures the
5-15% conversion lift from readers who scroll past the in-content
buy button. Uses IntersectionObserver on [data-xaf-buy-button] (auto-
added by XAFBuyButton) to track when the original CTA leaves the
viewport, then fades in. Pair with useAffiliateImpression() to fire
affiliate_impression on viewport entry.