Recording events

Recording events

This guide walks you through how to record event data in Prepr.

Introduction

Tracking how customers interact with your content is crucial for gaining insights and optimizing their experience. You can easily track and send events to Prepr, such as views, likes, subscriptions, and custom events, directly from your front end.

If you haven't yet done so, check out the Fundamentals guide for key data collection concepts. Before diving in, make sure you’ve already added the Prepr tracking code to your web app.

Recording predefined events

Prepr recognizes each of the events below and processes them differently according to their purpose.

View

You can use this event type when you want to record when a customer opens a web page or when a customer scrolls to an element in a web page.

If you want to record a view event for an entire page, add the content item meta tag to the HTML in your page to automatically send the View event to Prepr when the page loads.

If you want to record a view event for a content item embedded in a page, you can send the event using the following javascript function:

prepr('event', 'View', { 'id': "{{CONTENT_ITEM_ID}}" });

See some example code below for when the customer moves their mouse over the footer.

<html>
    ...
    <body>
        ...
        <footer onmouseover="prepr('event', 'View', { 'id': '{{CONTENT_ITEM_ID}}' })">
            ...
        </footer>
    </body>
</html>

Replace the {{CONTENT_ITEM_ID}} with the Content item ID of the footer in this case.

Like

You can use the Like event to indicate when a customer clicks a link or button to indicate their approval or interest. Send a like event from your front-end with the following javascript function:

prepr('event', 'Like');

See some example code below for when a customer clicks the Like button.

<html>
    ...
    <body>
        ...
        <button onclick="prepr('event', 'Like')">Like</button>
    </body>
</html>

If a Like event is sent to Prepr more than once, the subsequent events are simply ignored.

If you want to indicate that a customer likes a specific content item in the page, you can send the relevant Content item ID in the event.

prepr('event', 'Like', { 'id': "{{CONTENT_ITEM_ID}}" });

If you don't include a Content Item ID in the send request, the event will be linked to the content item in the content item meta tag you set up earlier.

You can also undo the Like event by sending a corresponding Unlike event for the same customer and content item.

prepr('event', 'Unlike');

Bookmark

You can use the Bookmark event to indicate when a customer clicks a link or button to save a piece of content to view later. Send a bookmark event from your front-end with the following javascript function:

prepr('event', 'Bookmark');

See some example code below for when the customer clicks the Bookmark button.

<html>
    ...
    <body>
        ...
        <button onclick="prepr('event', 'Bookmark')">Bookmark</button>
    </body>
</html>

If a Bookmark event is sent to Prepr more than once, the subsequent events are simply ignored.

If you want to indicate that a customer likes a specific content item in the page, you can send the relevant Content item ID in the event.

prepr('event', 'Bookmark', { 'id': "{{CONTENT_ITEM_ID}}" });

If you don't include a Content Item ID in the send request, the event will be linked to the content item in the content item meta tag you set up earlier.

You can also remove the Bookmark event by sending a corresponding Unbookmark event for the same customer and content item.

prepr('event', 'Unbookmark');

Subscribe

You can use a Subscribe event to indicate when a customer clicks a link or button to subscribe to a newsletter, content updates, or other recurring content notifications. Send a subscribe event from your front-end with the following javascript function:

prepr('event', 'Subscribe');

See some example code below for when the customer clicks the Subscribe button.

<html>
    ...
    <body>
        ...
        <button onclick="prepr('event', 'Subscribe')">Subscribe</button>
    </body>
</html>

If a Subscribe event is sent to Prepr more than once, the subsequent events are simply ignored.

If you want to indicate that a customer likes a specific content item in the page, you can send the relevant content item ID in the event.

prepr('event', 'Subscribe', { 'id': "{{CONTENT_ITEM_ID}}" });

If you don't include a Content Item ID in the send request, the event will be linked to the content item in the content item meta tag you set up earlier.

You can also cancel the Subscribe event by sending a corresponding Unsubscribe event for the same customer and content item.

prepr('event', 'Unsubscribe');

SignUp

You can use a SignUp event to track when a customer creates a new account or registers on your web app. This event is not related to a specific content item, but to a specific customer. In this case, make sure to add the customer meta tag. Send a SignUpevent from your front-end with the following javascript function:

prepr('event', 'SignUp');

See some example code below for when the customer clicks the Sign Up button.

<html>
    ...
    <body>
        ...
        <button onclick="prepr('event', 'SignUp')">Sign Up</button>
    </body>
</html>

If a SignUp event is sent to Prepr more than once, the subsequent events are simply ignored.

Unregistered customers are automatically deleted from Prepr after 90 days of inactivity. The SignUp event ensures the customers who've signed up will not be deleted.

Recording custom events

You can enhance your A/B tests and adaptive content by setting up custom events in your web app. For example, if you want to track when a visitor makes a Purchase or clicks to Start a video or livestream.

Depending on the purpose of your custom events, these can be recorded in Prepr in different ways:

Define conversion metrics

You can use custom events to set up conversions in your web app to get more valuable metrics for A/B tests or adaptive content. To do this, simply add HTML attributes to your A/B tests or when you set up personalization. By adding these HTML attributes, these custom events are automatically stored in Prepr.

Once done, you can also define customer segments using these custom events.

Define customer segments

If you only want to use custom events to create customer segments, for instance, you can send a Custom event with the event method. If you've already used custom events to define conversions, then you don't need to add the below javascript function.

prepr('event', '{{CUSTOM_EVENT_NAME}}');

In the example code below we send a Purchase event when a customer completes a purchase in the web app.

<html>
    ...
    <body>
        ...
        <button onclick="prepr('event', 'Purchase')">Purchase</button>
    </body>
</html>

Naming rules

You can choose any name for the custom event that meets the naming rules below.

  • Start the name with a capital letter.
  • The name has to be one word. In other words, no spaces.
  • Don't include any special characters like %, ˆ, &, etc.
  • The name should not start with a number.

Was this article helpful?

We’d love to learn from your feedback