End-to-end Guide for Data & Insights (Lytics)

This guide provides step-by-step instructions, along with a clear explanation of what each step does and why it matters. Follow these sections to configure Data & Insights (Lytics), install the Lytics tag, synchronize content, and activate personalized experiences.

• Contentstack account with Data & Insights (Lytics) enabled
• Your self-hosted site deployed
• Stack connected to the site
• Personalize project created

1. Create and Configure Data & Insights (Lytics) Connection

   link

   What: To establish a connection between Contentstack and Data & Insights (Lytics), you must first enable the Data Activation Layer (DAL). DAL acts as the central hub linking Contentstack (CMS), Data & Insights (Lytics) for behavior tracking, and Personalize (delivery). It authorizes data flow across platforms.

   Why: Without this authorization, Data & Insights (Lytics) cannot collect events, and Personalize cannot receive audience data. Personalize relies on this data to segment audiences and deliver relevant and impactful tailored experiences.

   See the following documentation to create and configure the DAL connection:

   • Create a Data & Insights (Lytics) Integration

   Once DAL is successfully created and configured for your organization, all the existing audiences from your Data & Insights (Lytics) account are automatically synced and displayed within the Personalize Audience module. The next step is to authorize and connect the DAL to Personalize.

   After successfully authorizing your Data & Insights and Contentstack connection, you must enable the JavaScript Tag plugin for Contentstack.

2. Enable and Install JavaScript Tag Plugin for Contentstack

   link

   What: The Data & Insights (Lytics) Js Tag collects real-time behavioral data (page views, clicks) and sets visitor cookies for audience segmentation.

   Why: This tag is the foundation of behavior-based audiences; without it, no data is collected and personalization cannot occur.

   To enable Data & Insights (Lytics)' JS Tag to sync profile data with Contentstack's Personalize Edge API, follow these steps:

   1. Go to app.lytics.com.
   2. Navigate to Account > Settings > JavaScript Tag.
   3. Check the box labeled "Automatically sync your profiles with Contentstack personalize?".
   4. Enter the base URL for the data center to which you want to send Contentstack's Personalize Edge API.
   5. Enter your Personalize Project ID connected to your DAL configuration.
   6. Click Save Changes.
      

   Once connected, you will be able to use any Data & Insights (Lytics) Audience as Personalize Audience to help tailor content for different audiences, manage variants, and run A/B tests to enhance engagement and conversions.

   Note:

   • If your website is hosted on Contentstack Launch, you can manage the event tags by following the steps outlined in the Event Tracking (Lytics) in Contentstack Launch guide a simple toggle in the Launch Environments settings > Event Tracking allows you to skip the manual setup.
   • If you are using GTM, follow the steps in this guide for Google Tag Manager.
   • For manually installing the JSTag, follow the steps below.

   1. Installation Instructions

      To integrate Data & Insights (Lytics), you need to add a HTML script tag to your app, which retrieves and initializes the JSTag.

      Copy the JSTag script from Data & Insights (Lytics):

      1. Open the Lytics app connected to your project.
      2. Go to Data Pipeline > SDK > Web (JS).

      3. Copy the script provided in the Installation Instructions section.

         

      4. Here’s a Next.js example where the script is added as a React Provider.

         Note: For this step, the file is placed in /components/context/, but you can choose to place this wherever appropriate. Copy and paste the script from Lytics Web SDK (JSTag) in your LyticsProvider.tsx file.

         // /components/context/LyticsProvider.tsx
         
         'use client'
         import React from 'react';
         
         import Script from 'next/script';
         
         export default function LyticsProvider({ children }: { children: React.ReactNode }) {
           return (
           <>
             
               {`
                 !function(){"use strict";var o=window.jstag||(window.jstag={}),r=[];function n(e){o[e]=function(){for(var n=arguments.length,t=new Array(n),i=0;i<n;i++)t[i]=arguments[i];r.push([e,t])}}n("send"),n("mock"),n("identify"),n("pageView"),n("unblock"),n("getid"),n("setid"),n("loadEntity"),n("getEntity"),n("on"),n("once"),n("call"),o.loadScript=function(n,t,i){var e=document.createElement("script");e.async=!0,e.src=n,e.onload=t,e.onerror=i;var o=document.getElementsByTagName("script")[0],r=o&&o.parentNode||document.head||document.body,c=o||r.lastChild;return null!=c?r.insertBefore(e,c):r.appendChild(e),this},o.init=function n(t){return this.config=t,this.loadScript(t.src,function(){if(o.init===n)throw new Error("Load error!");o.init(o.config),function(){for(var n=0;n<r.length;n++){var t=r[n][0],i=r[n][1];o[t].apply(o,i)}r=void 0}()}),this}}();
         
                 // Define config and initialize Lytics tracking tag.
                 // The setup below disables automatic Page Analysis to avoid duplicate data.
                 jstag.init({
                   src: 'https://c.lytics.io/api/tag/ed11d636xxxxxxxxxxxxxxxxxxxx/latest.min.js'
                 });
         
                 // You may need to send a page view depending on your use-case
                 jstag.pageView();
               `}
             
                 {children}
               </>
             );              
         }
         

         Here, ed11d636xxxxxxxxxxxxxxxxxxxx is the Lytics CID (a Unique Lytics Account ID, which can be found in your Data & Insights (Lytics) account via Accounts > Settings > Details > Account ID).

         The Lytics JavaScript Tag (JSTag) tracks user behavior during their site visit. This anonymous tracking is used to build and enhance behavioral user profiles. The JSTag also associates the current user's Data & Insights (Lytics) profile, making profile data like audience membership available to the Personalize integrations.

         Wrap the app with LyticsProvider as shown below:

         // app/layout.tsx
         
         import LyticsProvider from '@/components/context/LyticsProvider';
         
         export default async function RootLayout({
           children,
         }: {
           children: React.ReactNode;
         }) {
         
           return (
             <html lang="en">
              <body>
                      <LyticsProvider>{children}</LyticsProvider>
               </body>
             </html>
           );
         }
         
         

         The Lytics Provider initializes the Lytics tracking tag to track user behavior on site visits.

   2. In-app Verification Assistant

      Data & Insights (Lytics) provides a simple tool to confirm that data is flowing into your account. Note that it may take a few minutes for events to appear in the UI.

      1. Go to app.lytics.com.
      2. Navigate to Data Pipeline > SDK > Web (JS) > Verify the Installation.
      3. At the bottom of the page, click the Refresh button to validate the installation.

      4. If the status does not say Successfully installed click it again.

         

3. Set Up Content Sync to Import CMS Entries and Taxonomies

   link

   What: Content Sync imports your Contentstack entries and taxonomies into Data & Insights (Lytics) so content can be analyzed and scored.

   Why: Without syncing content, Data & Insights (Lytics) cannot build topic-based profiles or recommend relevant content.

   Note: Use this guide to score visitors based on the topics they consume.

   1. Pick the Content Types(CTs) you want to import (e.g., article, landing_page).
   2. Any CT without a URL field is ignored.
   3. The import algorithm examines each CT’s “text-y” fields (like RTEs) and picks the most text-dense field to generate topics.

   After the affinities are generated, review them and use them based on your cases. Refer to the Topics and Affinities documentation for more.

   Tip: Set up your audiences and experiences in Data & Insights (Lytics) Audiences and configure Personalize Experiences (Segmented or A/B Test) after verifying that topics are generated in the Content > Context Layers section of the Data & Insights (Lytics) Dashboard, accessible from the left navigation panel.

4. Create Data & Insights (Lytics) Audiences and Personalize Experiences

   link

   What: This step involves using the content affinities generated from Content Sync to build meaningful audience segments within Data & Insights (Lytics). These segments are then synced to Contentstack Personalize, where you can create tailored experiences, either segmented or A/B tests based on audience behavior and interest.

   Why: Without defining audiences, you won’t be able to personalize content based on user behavior. This enables effective segmentation. Data & Insights (Lytics) uses content interaction data to assign users to audiences, and Personalize uses those audiences to deliver targeted Entry Variants. It’s the bridge between raw behavior and tailored content delivery.

   

   Additional Resource: Use the Audience Insights App to view real-time insights into audience segments, content engagement, and behavior patterns helping you optimize personalization strategies at scale.

5. Integrate Personalize With Your App

   link

   What: Use the SDK or custom middleware to fetch variant data specific to users for server-side rendering.

   Why: If you need direct programmatic control over variant injection into pages, this step is required. Otherwise, variants may be served automatically based on cookies.

   To get Personalize up and running in your app, please use one of the Setup Personalize Guides.

   Note: To enable Audience Preview in Timeline and Visual Builder for your Personalize project, follow the steps in the following guide:

   • Audience Preview
   • Set Up Visual Builder for Your Website

   Your Personalize Edge SDK is now set up and ready to interact with your Contentstack Personalize project and Data & Insights (Lytics) audiences, enabling personalization for your website.

   Tip: Set up Audience Preview to view real-time personalized experience.

6. Validating the Set Up

   link

   Final validation of your setup can be viewed in the Audience Preview within the Visual Builder and Timeline that you have configured.

   

   In Personalize, you can view the Impressions and Conversions (for A/B Test experiences only) for each of your experiences within the Experience Analytics.

The following example demonstrates how to integrate Contentstack Personalize with Data & Insights (Lytics) using a Next.js app deployed via Launch: Next.js example GitHub repository hosted at https://nextjs-example-with-lytics.contentstackapps.com.