Prismic is a headless CMS with Slice Machine for component-based content modeling. Since Prismic delivers content via API, all tracking and analytics are implemented in your frontend framework (Next.js, Nuxt, SvelteKit, etc.).
Available Integrations
Analytics Platforms
- Frontend framework implementation
- Slice-level tracking with Slice Machine
- Preview mode handling
- Custom type analytics
Tag Management
- Framework-specific GTM installation
- Data layer structure for Prismic documents
- Slice zone tracking
- Link resolver integration
Marketing Pixels
- Frontend integration methods
- Conversions API for server-side tracking
- Slice interaction tracking
- Privacy and consent management
Prismic-Specific Integration Considerations
Slice Machine Architecture
Prismic's Slice Machine creates component-based content:
- Slices: Modular content sections
- Custom Types: Document schemas (pages, posts, etc.)
- Slice Zones: Ordered collections of slices
- Shared Slices: Reusable across custom types
Slice-Level Tracking
Track engagement with individual slices:
// Track slice visibility and interactions
function trackSliceView(slice, index) {
gtag('event', 'slice_view', {
slice_type: slice.slice_type,
slice_variation: slice.variation,
slice_position: index,
document_id: document.id,
document_type: document.type
});
}
Common Frontend Frameworks with Prismic
Next.js
- Official Prismic Next.js integration
- App Router and Pages Router support
- Preview mode with draft content
- Static optimization with ISR
Nuxt.js
- @nuxtjs/prismic module
- SSR and SSG support
- Auto-generated types
- Preview integration
SvelteKit
- @prismicio/svelte integration
- Load functions for data fetching
- Preview routes support
- Adapter flexibility
- gatsby-source-prismic plugin
- Build-time data fetching
- Image optimization
- Preview toolkit
Document Structure Impact
Prismic's document model for analytics:
Documents:
// Track document-level metrics
gtag('event', 'document_view', {
document_id: document.id,
document_uid: document.uid,
document_type: document.type,
first_published: document.first_publication_date,
last_published: document.last_publication_date,
locale: document.lang
});
Slice Zones:
// Track slice zone composition
const sliceAnalytics = document.data.slices.map((slice, index) => ({
type: slice.slice_type,
variation: slice.variation,
position: index
}));
gtag('event', 'page_composition', {
document_id: document.id,
slice_count: sliceAnalytics.length,
slice_types: [...new Set(sliceAnalytics.map(s => s.type))].join(',')
});
Linked Documents:
// Track content relationships
gtag('event', 'linked_content_view', {
source_document: document.id,
linked_document: linkedDoc.id,
link_type: linkedDoc.type,
relationship_field: 'related_articles'
});
Preview Mode Handling
Handle Prismic preview appropriately:
// Next.js App Router example
import { createClient } from '@prismicio/client';
import { draftMode } from 'next/headers';
export default async function Page({ params }) {
const { isEnabled } = draftMode();
const client = createClient();
const document = await client.getByUID('page', params.uid, {
ref: isEnabled ? undefined : undefined // Uses preview ref automatically
});
// Only track in production mode
if (!isEnabled) {
trackPageView(document);
}
return <SliceZone slices={document.data.slices} />;
}
Link Resolver Integration
Track navigation with Prismic's Link Resolver:
// Enhanced Link Resolver with tracking
export function linkResolver(document) {
// Track internal link resolution
if (typeof window !== 'undefined') {
gtag('event', 'internal_link_resolved', {
document_type: document.type,
document_uid: document.uid
});
}
switch (document.type) {
case 'page':
return `/${document.uid}`;
case 'blog_post':
return `/blog/${document.uid}`;
default:
return '/';
}
}
Integration Best Practices
1. Use Document IDs for Stable Tracking
Documents have stable IDs that persist:
// Prefer ID over UID for consistent tracking
gtag('event', 'content_view', {
content_id: document.id, // Stable across environments
content_uid: document.uid, // Human-readable but may change
content_type: document.type
});
2. Track Slice Performance
Measure which slices drive engagement:
// Track time spent on each slice
slices.forEach((slice, index) => {
observeSlice(slice, (timeSpent) => {
gtag('event', 'slice_engagement', {
slice_type: slice.slice_type,
slice_variation: slice.variation,
time_spent_ms: timeSpent,
document_id: document.id
});
});
});
3. Track Slice Variations
Prismic variations enable A/B testing:
// Track which variation is displayed
gtag('event', 'slice_variation_view', {
slice_type: slice.slice_type,
variation: slice.variation,
variation_label: getVariationLabel(slice),
is_default: slice.variation === 'default'
});
4. Handle Multi-language Content
For Prismic's localization:
gtag('event', 'page_view', {
document_id: document.id,
document_locale: document.lang,
alternate_languages: document.alternate_languages?.length || 0,
master_locale: document.lang === masterLocale
});
5. Track Rich Text Engagement
For Prismic Rich Text fields:
// Track reading progress through rich text
function trackRichTextEngagement(field, progress) {
gtag('event', 'rich_text_progress', {
document_id: document.id,
field_name: field,
progress_percent: Math.round(progress * 100),
word_count: getWordCount(document.data[field])
});
}
Testing Integrations
Preview Mode Testing:
- Verify tracking disabled in preview
- Test draft content handling
- Check preview toolbar impact
Production Testing:
- Verify document view tracking
- Test slice interaction events
- Monitor link resolver tracking
Localization Testing:
- Test language switching events
- Verify locale in tracking data
- Check alternate language handling
Slice Machine Testing:
- Test new slice types tracking
- Verify variation tracking
- Check slice zone updates
Next Steps
Choose your integration to get started:
Additional Resources
Prismic Documentation: