Canonical

Displays a canonical link attribution component that shows where content was originally written, with UTM parameter tracking for analytics.

Props

Usage

import Canonical from '@/components/molecules/Canonical';

<Canonical 
  url="https://example.com/original-post"
  pagePath="/blog/my-post"
/>

Features

• UTM Attribution: Automatically adds UTM parameters for tracking:
  • utm_source: "developers.contentstack.com"
  • utm_medium: "canonical"
  • utm_campaign: "original-content"
  • utm_content: Page path (if provided)
• Design System: Uses design system colors and typography
• Grey Box Styling: Displays in a rounded grey box (bg-surface-3)
• Small Text: Uses cs-xs-body for compact display
• External Link: Opens in new tab with security attributes (target="_blank" rel="noopener noreferrer")
• CSLP support: Supports Contentstack Live Preview editing

UTM Parameters

The component automatically adds UTM parameters to track attribution:

• utm_source: Identifies the source site (developers.contentstack.com)
• utm_medium: Identifies the link type (canonical)
• utm_campaign: Campaign identifier (original-content)
• utm_content: Specific page that linked (from pagePath prop)

This allows the destination site to track traffic from canonical links in their analytics.

Styling

• Background: bg-surface-3 (grey box)
• Border radius: rounded-lg
• Padding: px-4 py-3
• Text: cs-xs-body text-text-default-light
• Link: text-amethyst-accent with hover state

Notes

• Always displayed at the bottom of pages (Blog and Page components)
• URL displayed in component is the original URL (without UTM params)
• Actual link includes UTM parameters for tracking
• Handles URLs that already have query parameters correctly