Setting up the tracking code

This guide takes you through installing the tracking code, adding meta tags and testing this setup.

Introduction

Installing the Prepr tracking code allows you to capture customer data and lets you track how customers engage with your content. This is an essential step when setting up personalization, A/B testing and recommendations. Even before implementing personalization, it also helps your digital teams gather useful insights for segmentation.

If you haven't yet done so, check out the Fundamentals guide for key data collection concepts. And for an overview of the high-level steps needed for data collection, check out the Step-by-step guide.

The steps below show you how to add the tracking code to your web app and start collecting data right away.

Adding the tracking code

Prepr uses a lightweight piece of JavaScript to capture customer data and events. Follow the steps below to add this tracking code to your web app.

Go to Settings → Event tracking.
Click the Copy code link to get a ready-to-use Prepr tracking code and add it to the <head> section of your web-app.

<html>
    <head>
        <!-- Prepr Tracking Code -->
        <script>
            ! function (e, t, p, r, n, a, s) {
            e[r] || ((n = e[r] = function () {
            n.process ? n.process.apply(n, arguments) : n.queue.push(arguments)
            }).queue = [], n.t = +new Date, (a = t.createElement(p)).async = 1, a.src = "https://cdn.tracking.prepr.io/js/prepr_v2.min.js?t=" + 864e5 * Math.ceil(new Date / 864e5), (s = t.getElementsByTagName(p)[0]).parentNode.insertBefore(a, s))
            }(window, document, "script", "prepr"), prepr("init", "abc123ecfff2385c9c4fe027d56ea7d544cee78b173"), prepr("event", "pageload");
        </script>
    </head>
    <body>
        ...
    </body>
</html>

Once you've added the tracking code to your front-end app, you can then add simple meta tags to your web app to track events for customers on specific content items.

If you're unable to embed the Prepr tracking code, for example, due to restrictions, you can record events in Prepr by using the REST API.

Tracking content items

To start tracking events on your content items, add one of the following meta tags to the <head> section on these content pages:

<!-- property tag -->
<meta property="prepr:id" content="{{CONTENT_ITEM_ID}}"/>
 
<!-- or name tag -->
<meta name="prepr:id" content="{{CONTENT_ITEM_ID}}"/>

Set the content value in the property or name tags to your Content Item ID value of the page content item, such as a Home page.

content item ID

Now that the tracking code has been added to track events on content items, let's look at how to link customers to the events.

Linking customers to events

As you've seen in the fundamentals guide, a customer is linked to an event. When tracking events using the tracking code, Prepr automatically links the event to a customer by generating a unique ID and storing it in the __prepr_uid cookie. This default behavior simplifies your code when recording events in Prepr.

On the other hand, if your site uses an identity provider to manage your customers, you can add a meta tag to the HTML of your web app to link the customer ID to any event that occurs in the session. Replace the content value in the example code below with the known customer ID from your identity provider.

<!-- property tag -->
<meta property="prepr:customer-id" content={{CUSTOMER_ID}}/>
 
<!-- or name tag -->
<meta name="prepr:customer-id" content={{CUSTOMER_ID}}/>

If the CUSTOMER_ID you provide does not exist in Prepr when the event gets processed, a new customer profile will be created automatically. Now that you know how to link customers to events, let's look at how you can test your setup.

Testing event tracking

Before sending more specific event data to Prepr, it's important to test that the above setup was done correctly. You can test it either from the browser or directly in Prepr:

From the browser

To test event tracking from a browser, follow the steps below.

Simply navigate to the page in your web app where you've included the meta tag above. This automatically triggers a view event that gets sent to Prepr.
Right-click anywhere in the page and click the Inspect option.
Click the Network tab and refresh the content page.
Choose the All button and enter pixel.gif in the Filter textbox.

You'll see the tracking request with a 200 OK status.

In Prepr

To test event tracking in Prepr, follow the steps below.

Simply navigate to the page in your web app where you've included the meta tag above. This automatically triggers a view event that gets sent to Prepr.
Log in to your Prepr environment that your web app is connected to.
Go to the Segments tab.
Click the customer at the top of the list. The Date value will match the time that you opened the page.
On the customer detail page, you'll see a View event in the events table, and the details should match the content item that you added in the meta tag.

view event

Great! Your tracking code is installed successfully. You are ready to record some more events depending on your needs for personalization and A/B testing.

Sending events to Google Tag Manager (GTM)

To send experiment-related events (such as impressions of content variants, A/B experiments, or segmented views) to Google Tag Manager, you can enable the built-in GTM integration in the Prepr tracking code.

This allows you to reuse the data collected by Prepr for reporting and personalization pipelines in Google Analytics 4 (GA4) or other GTM-connected services.

To activate this, you simply need to update your prepr("init") function in the tracking code with the googleTagManager destination flag:

prepr(
    "init",
    "abc123ecfff2385c9c4fe027d56ea7d544cee78b173",
    {
        destinations: {
            googleTagManager: true
        }
    }
);

Once this is enabled, Prepr automatically sends personalization events to GTM dataLayer under the name prepr_personalize.

{
  event: 'prepr_personalize',
  event_name: 'Impression', // or Click, Conversion, etc.
  prepr_experiment: 'experiment-id',
  prepr_item: 'content-item-id',
  prepr_variant: 'variant-id',
  prepr_segment: 'CUSTOMERS_FROM_GERMANY' // or 'ALL_OTHER_USERS' for control
}

Additional configuration options

You can optionally configure a time threshold to skip short impressions:

variantImpressionThreshold

This setting ensures that impression events for personalized variants are only triggered if the content stays in view for a minimum duration. This could help filter out accidental or too-short impressions, improving event quality

prepr(
    "init",
    "abc123ecfff2385c9c4fe027d56ea7d544cee78b173",
    {
        variantImpressionThreshold: 2000 // in milliseconds (e.g., 2000 = 2 seconds)
    }
);

Default: 0 (fires always when a variant leaves the viewport)

Excluding IP addresses

Sometimes you want to make sure that internal IP addresses are not tracked. If you can exclude interactions from internal IP addresses, it makes the insights you gain more realistic and calculates more accurate metrics. You can exclude these IP addresses directly in Prepr.

Follow the steps below to exclude IP addresses.

Go to Settings → Event tracking.
Enter the list of IP addresses that you want to exclude from data collection.

Now that you've set up event tracking, you can record more specific events.

Step-by-step guide Recording events

Was this article helpful?

We’d love to learn from your feedback