Kenticokontent Analytics Integrations: Setup Guide | OpsBlu Docs

Kenticokontent Analytics Integrations: Setup Guide

Integrate GA4, GTM, and Meta Pixel with Kontent.ai (formerly Kentico Kontent) in React, Next.js, .NET, and other frontends.

Kontent.ai (formerly Kentico Kontent) is a headless CMS that delivers content through a REST Delivery API and a GraphQL endpoint. Like all headless platforms, Kontent.ai has no frontend rendering -- analytics integration happens entirely in your frontend application (React, Next.js, .NET, Gatsby, etc.).

Integration Architecture

Kontent.ai is API-only:

  1. Frontend Framework -- Your application loads tracking scripts and fires events. Kontent.ai's Delivery API (/items/) provides structured content for the data layer.
  2. Delivery SDK -- Official SDKs (@kontent-ai/delivery-sdk for JS, Kontent.Ai.Delivery.Sdk for .NET) return typed content items with system metadata (type, language, codename).
  3. Webhooks -- Kontent.ai fires webhooks on content changes. Useful for ISR revalidation, not for user analytics.
  4. Custom Elements -- Kontent.ai supports custom UI elements in the admin, but these run in the authoring environment, not on the published frontend.

Available Integrations

Analytics Platforms

Google Analytics 4

  • Frontend gtag.js integration
  • GTM-based GA4 with Kontent.ai content data layer

Tag Management

Google Tag Manager

  • Frontend app shell integration
  • SPA route-change tracking required

Marketing Pixels

Meta Pixel

  • Via GTM container (recommended)
  • Direct fbq integration

Next.js + Kontent.ai Example

Fetch content items and build the data layer from the Delivery API response:

// app/blog/[slug]/page.tsx (Next.js App Router + Kontent.ai)
import { DeliveryClient } from '@kontent-ai/delivery-sdk';

const client = new DeliveryClient({
  environmentId: process.env.KONTENT_ENV_ID!,
});

export default async function BlogPost({ params }) {
  const response = await client
    .item(params.slug)
    .toPromise();
  const item = response.data.item;

  const dataLayer = {
    event: 'virtual_pageview',
    content_type: item.system.type,
    content_codename: item.system.codename,
    page_title: item.elements.title?.value || '',
    language: item.system.language,
    collection: item.system.collection,
    last_modified: item.system.lastModified,
  };

  return (
    <>
      <script
        dangerouslySetInnerHTML={{
          __html: `window.dataLayer=window.dataLayer||[];window.dataLayer.push(${JSON.stringify(dataLayer)});`,
        }}
      />
      <article>{/* render content */}</article>
    </>
  );
}

Kontent.ai System Fields for Analytics

Every content item from the Delivery API includes system metadata:

Kontent.ai Field Data Layer Variable Example
system.type content_type blog_post, landing_page
system.codename content_codename my-first-post
system.language language en-US, de-DE
system.collection collection default, blog
system.lastModified last_modified ISO 8601 timestamp
system.workflow workflow_step published, archived

Platform Limitations

No platform-level tracking. Kontent.ai has no built-in analytics, no script injection field, and no tracking configuration in the admin. Everything is in your frontend.

SPA route tracking. Single-page applications require manual virtual pageview events on route changes. The Kontent.ai SDK fetches content in the background -- these are not detected as page navigations by GTM.

Preview mode. Kontent.ai supports preview delivery via the Preview Delivery API. Ensure preview environments exclude or tag analytics events using the system.workflowStep field in the data layer.

Content item language variants. Kontent.ai supports localized content variants. The same codename can have different content per language. Include system.language in your data layer to segment analytics by language variant.

Delivery API rate limits. Kontent.ai applies rate limits to the Delivery API (varies by plan). High-traffic sites using runtime API calls for data layer construction should use SSG/ISR to avoid hitting rate limits.

Performance Considerations

  • SDK bundle size. The @kontent-ai/delivery-sdk adds ~15KB gzipped. For minimal overhead, use direct fetch() against the Delivery API instead of the SDK.
  • SSG/ISR recommended. Pre-render pages with data layer values at build time or via ISR. This eliminates runtime API calls and ensures data layer values are available in the HTML before GTM fires.
  • Rich text resolution. Kontent.ai's rich text fields may contain linked items that require additional resolution. Keep analytics data layer queries separate from full content queries to minimize API response size.
  1. Add GTM to frontend app shell -- Single container for all tracking
  2. Implement SPA route tracking -- Virtual pageview events on navigation
  3. Map Kontent.ai system fields to data layer -- Content type, language, collection, workflow step
  4. Configure GA4 in GTM -- Content groups from Kontent.ai content types, custom dimensions from system fields
  5. Add Meta Pixel via GTM -- Standard engagement tracking

Next Steps

For general integration concepts, see the integrations overview.

Back to top