Prismic Analytics Integrations: Setup Guide | OpsBlu Docs

Prismic Analytics Integrations: Setup Guide

Available integrations for Prismic-powered sites including analytics platforms, tag managers, and marketing pixels.

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

Google Analytics 4

  • Frontend framework implementation
  • Slice-level tracking with Slice Machine
  • Preview mode handling
  • Custom type analytics

Tag Management

Google Tag Manager

Marketing Pixels

Meta Pixel

  • 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

  • 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} />;
}

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:

Back to top