Buy Button
Buy Button
The XAFBuyButton component is the monetized call-to-action for review pages. It composes product image, formatted price, merchant-default CTA label, an FTC disclosure text, and merchant link tagging — and emits click events with the original URL for downstream tracking. All wired up in one component.
Components
<XAFBuyButton />
Two API shapes — pass a full AffiliateLink object (recommended for MDC / inline article content), or pass individual fields.
<!-- Recommended: pass a link object -->
<XAFBuyButton
:link="{
merchant: 'amazon',
url: 'https://amazon.com/dp/B0CX123',
price: 29.99,
image: 'https://...',
label: 'Compact wireless keyboard',
}"
@click="onBuyClick"
/>
<!-- Individual fields (handy in MDC: ::XAFBuyButton{...}) -->
<XAFBuyButton
merchant="walmart"
url="https://walmart.com/ip/456"
:price="19.99"
label="Bluetooth speaker"
compact
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
link | AffiliateLink | — | Full link object (recommended). Overrides individual fields when provided. |
merchant | MerchantId | 'amazon' | Merchant when not passing link. |
url | string | '#' | Outbound URL when not passing link. |
price | number | — | Price for display + currency formatting. |
image | string | — | Product image URL. |
productName | string | — | Alt text + headline. |
label | string | — | Sub-headline. |
compact | boolean | false | Compact horizontal layout. |
ctaLabel | string | from merchant | Override the merchant-default CTA label. |
color | 'primary' | 'success' | 'neutral' | 'primary' | Button color. |
newTab | boolean | true | Open in a new tab. |
disabled | boolean | false | Render as a disabled link. |
showDisclosure | boolean | true | Show the FTC disclosure text. |
position | string | — | Position label for click tracking (e.g. 'hero', 'sidebar'). |
Events
| Event | Payload | Description |
|---|---|---|
click | { url, merchant, originalUrl } | Fired on CTA click. originalUrl is the URL before tag injection (handy for analytics that want the clean destination). |
Click tracking (GTM / GA4)
The component calls useAffiliateContent().trackClick({ ... }) which pushes an affiliate_click event to window.dataLayer:
window.dataLayer = window.dataLayer || []
window.dataLayer.push({
event: 'affiliate_click',
merchant: 'amazon',
url: 'https://amazon.com/dp/B0CX123?tag=yourtag-20',
originalUrl: 'https://amazon.com/dp/B0CX123',
position: 'hero',
})
If GTM is not loaded this is a no-op — safe to ship without GTM.
FTC compliance
The rendered anchor carries rel="sponsored noopener noreferrer". The bundled or configured disclosure text renders above or below the CTA (controlled by xAffiliateContent.disclosure.position).
Examples
Hero buy button on a product review
<XAFBuyButton
merchant="amazon"
url="https://amazon.com/dp/B0CX123"
:price="29.99"
image="https://m.media-amazon.com/images/I/keyboard.jpg"
product-name="Compact wireless keyboard"
label="Compact wireless keyboard"
position="hero"
/>
Compact sidebar CTA
<XAFBuyButton
merchant="walmart"
url="https://walmart.com/ip/456"
:price="19.99"
product-name="Bluetooth speaker"
compact
position="sidebar"
/>
AI Context
component: XAFBuyButton
package: "@xenterprises/nuxt-x-affiliate"
use-when: >
Building a monetized buy-now CTA on a review or product page. Renders
image + price + merchant-default CTA + FTC disclosure in one block.
Resolves the merchant's tagValue from app.config.ts (xAffiliateContent),
injects the tag into the outbound URL (idempotent), and pushes an
affiliate_click event to window.dataLayer for GTM/GA4 tracking. Renders
with rel="sponsored noopener noreferrer" on the anchor for FTC compliance.
Listen for the click event to capture originalUrl before tag injection.