Personalize website

Estimated duration: 15-30 minutes

This tutorial demonstrates how to personalize the customer experience using the Prepr GraphQL API. Follow the step-by-step guide below to set up personalization for your web application.

This video was created using AI avatars and voices to ensure a consistent look and feel. The use of AI matches our culture of using innovative technologies.

Introduction

Deliver a personalized customer experience for your website or app visitors by using built-in Prepr features. Let's look at an everyday use case: a visitor on your website sees personalized content based on their clicking behavior. For example:

1. Visitor 1 visits our bake shop website to find easy recipes. Let's classify them as a beginner baker. Then, when they visit the page below they see personalized content for beginner bakers.
2. Visitor 2 looks for state-of-the-art kitchen equipment to replace the aging equipment in their bakery. Let's classify them as a pro baker. Then, when they visit the page below they see personalized content for pro bakers.
3. Visitor 3 visits our bake shop website for the first time, so when they go to the page below, they see the generic variant of the page.

In the above example, the front end selects which variant of the page to render depending on the type of visitor, in our case, a beginner baker or a pro baker.

You can then use an analytics tool like Google Analytics to measure the click-through rate for each personalized page and determine how well they perform against the non-personalized page.

The example above is just one method for personalization. You could also personalize based on other characteristics such as age, gender, membership status, etc. In these cases, a visitor's Customer ID is assigned to a corresponding segment.

You could even personalize based on criteria outside of the web app, for example, when a user visits your web app from a social media link. In this case you set up the segment to match a UTM tag on the redirect link. Check out one of our front-end app complete guides for more details.

To set up personalized pages in Prepr, you need to complete the following steps:

Step 1: Set up segments. Set up segments based on specific visitor interaction on the content. These segments are the groups of visitors for whom you want to deliver a personalized experience.

Step 2: Create and personalize a stack field. For each segment, create content specifically aimed at those people.

Step 3: Add personalization to the front end. This is a one-time update to the code which means that any updates to personalized content will automatically be applicable without further code changes.

Step 4: Set up analytics. Using your preferred analytics tool, measure and compare click-through-rates for each of the personalized variants.

Step 5: Evaluate the personalized variants. After collecting analytics on the performance of the personalized pages, you can use this data to improve on your personalized pages and/or criteria.

Prerequisites

To implement personalization for the above example, you need to have the following set up in Prepr beforehand:

• A Prepr CMS account
• An environment with demo data in Prepr

We will make use of the Home Page content item from the demo data which is based on the Page pattern.

Step 1: Set up segments

Before implementing personalization you need to choose different target segments for your web app. In this example we have two segments: Beginner bakers and Pro bakers. If you’re using preloaded demo data in your Prepr environment as mentioned above in the Prerequisites section, these are available in your Prepr environment. So, you only need to assign customers to the corresponding segment based on Prepr data as follows:

1. Go to the Segments tab and click on each segment to make an update.
2. Update a segment by adding a condition to track when users viewed specific Prepr content items. For more details, check out the Customer segments page.

By completing this step, you will have successfully grouped your web app visitors based on their clicking behavior.

Step 2: Create and personalize a stack field

Now that you know for which visitors you want to personalize the experience, it's time to create specific content for each segment. In this case, you need three page headers: one for Beginner bakers, one for Pro bakers, and one for all other visitors.

Go to the Content tab, click the Home page content item and add the personalization as follows:

1. In the Stack, go to the Page header and click the icon to add the personalization.
2. In the Personalization box, duplicate the page header. The original page header will automatically be used as the fallback content and linked to All other users.
3. Update the image and text for the Beginner bakers segment.
4. Click the Select audience button and choose the Beginner bakers segment for this header. Note that it's also possible to limit this personalized header to a specific country.

5. (Optional) Drag and drop another content item or component into the personalization. This feature gives you a wide array of options when personalizing your content.
6. Duplicate the original page header again and update the image and text for the Pro bakers segment. Repeat step 4 to link the Pro bakers segment to this page header.

At this point, you have successfully created personalized content.

Step 3: Add personalization to the front end

In this step we look at how to do the following:

• Add tracking code to track visitors
• Retrieve the variants using the API
• Add HTML attributes to the page header component

Add tracking code to track visitors

In the previous step, you set up the segments based on visitor interaction on Prepr data. To be able to track a visitor's interaction on Prepr data, you need to add some tracking code to the front-end app.

The Prepr tracking code is a lightweight piece of javascript to capture events on Prepr data:

1. Go to Settings > Tracking code.
2. Click Copy code to get the Prepr tracking code and add it to the <head> section of your web app.

3. Add a custom HTML meta tag to content pages to start tracking views.

To start tracking views on content items, add the following meta tag to the <head> section of content pages. Use the content item ID as the value for the content property.

<meta property="prepr:id" content="16c63a1e-e837-4951-bd9a-b933a8d14b2f"/>

You can test if the implementation works by visiting a content page on your web app. Then, check the customer in Prepr to see if Prepr registered a view event.

1. Go to the Segments tab.
2. Open the latest customer at the top of the list.
3. Check if Prepr captured the page view.

View the data capturing guide for all tracking options.

Your web app can now track your visitors' events.

Retrieve variants using the API

Now it's time to retrieve the Home page content item including the page header variants.

Copy the sample code below into your front-end application. Update the id string of the query with the Home page Content item ID that you used in Step 2.

query{
   Page (id: "6b9aab64-4972-4049-810f-333fc89bf87c") {
    title
        stack {
            ... on PageHeader {
                heading
                image {
                    name
                }
                text
                cta_label
                _context {
                    kind
                    variant_id
                    group_id
                }
            }
            __typename
        }
    }
}

To retrieve the page content, call the API using the query above and pass a Prepr Customer ID as a header as shown below. The Prepr Customer ID is required to determine which segment a visitor belongs to and as a result which variant a visitor gets. Get a customer ID from one of the segments that you set up previously.

--header 'Prepr-Customer-Id: <YOUR-CUSTOMER-ID>' 

As a response to your API request, Prepr sends the variant to be displayed. Your app then needs to build its response based on this variant. If you don't specify a customer ID in the header or the customer ID belongs to a visitor that does not belong to either segment, then the query response looks like the example below.

{
    "data": {
        "Page": {
            "title": "Home page",
            "stack": [
                {
                    "heading": "Welcome to the bake shop",
                    "image": [
                        {
                            "name": "welcome"
                        }
                    ],
                    "text": "Learn some basic steps to get started or kick your skills up a notch with our handy tips, recipes and products.",
                    "cta_label": "Let's get baking!",
                    "_context": {
                        "kind": "PERSONALIZATION",
                        "variant_id": "ALL_OTHER_USERS",
                        "group_id": "2b8f2165-b303-494f-b2b2-f813c90382f9"
                    },
                    "__typename": "PageHeader"
                }
            ]
        }
    }
}

If the customer ID in the header belongs to a visitor that belongs to one of the segments, then the query response looks like the example below.

{
    "data": {
        "Page": {
            "title": "Home page",
            "stack": [
                {
                    "heading": "Welcome beginner baker!",
                    "image": [
                        {
                            "name": "welcome beginner"
                        }
                    ],
                    "text": "Get started with our easy to follow recipes, our basic kitchen tips and kitchen gadgets that every beginner needs.",
                    "cta_label": "Let's start our baking journey!",
                    "_context": {
                        "kind": "PERSONALIZATION",
                        "variant_id": "BEGINNER-BAKERS",
                        "group_id": "2b8f2165-b303-494f-b2b2-f813c90382f9"
                    },
                    "__typename": "PageHeader"
                }
            ]
        }
    }
}

Add HTML attributes to the page header

To track visitor interactions for personalization and get accurate reporting results, we need to add attributes to the page header. In our example, we have a Page header with some specific text and a call to action link for each variant, so we want to report on the following types of visitor interactions:

• Impressions: How many visitors looked at the page header for each variant.
• Clicks: How many visitors clicked the CTA link for each variant.

We can determine the click-through rate based on these two events, which will show how well each variant performed. Because the above interactions need to be per variant, we also need a custom variable to identify the variant.

See an example code snippet to include the HTML attributes below:

<!-- Page header -->
<div
  id="{{__typename}}_{{group_id}}"
  personalized-variant="{{ variant_id }}"
  ...
>
<!-- Call to action link -->
  <a
    href="#" 
    id="cta_link"
    personalized-variant="{{ variant_id }}"
    ...
  >Learn more</a>
</div>

In the above example, we set the IDs dynamically by using the following fields returned in the query response:

• __typename - The element type, for example, PageHeader.
• group_id - A unique ID to identify a specific personalization group. A personalization group is created every time a content editor clicks the personalization icon in the content item. This is useful to identify all elements that have personalization enabled.
• variant_id - This returns a value of the segment for the variant, for example, BEGINNER-BAKERS or PRO-BAKERS. This value is ALL_OTHER_USERS for the non-personalized variant.

Using the query response above as an example the IDs get the following values:

• id = "PageHeader_2b8f2165-b303-494f-b2b2-f813c90382f9"
• personalized-variant = "BEGINNER-BAKERS"

That’s it. You have integrated personalization into your website. Now, you can show each visitor a personalized header based on their clicking behavior.

The next step is to set up your analytics tool to measure the click-through rate to see how well the personalized pages perform for each segment.

Step 4: Set up analytics

Prepr Personalization works with any analytics tool. If you already have your analytics tool set up to measure visitor interactions on your web app, please adapt the following explanation to your specific case.

In this example, we show you how to measure visitor interactions on each personalized variant using GA4 and GTM.

Set up GTM

1. Connect GA4 and GTM to your web app by following the GA4 and GTM setup process.
2. In GTM, create a custom variable to get the value of the variant attribute that you created in the front end.

Create impression and click events in GTM

1. Create tags in GTM for the following events:

• An element visibility event that fires when the page header section is 100% visible to the visitor.

Make sure that the visibility trigger as shown in the image below has the same Element ID value as the page header ID created in the front-end in the previous step.

• A click link event that fires when a user clicks the CTA link.

Make sure that the click trigger as shown in the image below has the same Click ID value for the page header CTA ID created in the front end in the previous step.

2. Test your events by clicking on the Preview button and enter the URL of the web app that you want to test.

3. If the tags are firing successfully and the variables are being populated as expected from the front end, click the Submit button to publish these tags to your web app.

Create reports in GA4

1. Create a custom dimension in GA4 so that the variant parameter is available for detailed reporting in Google Analytics.

2. Create a Funnel exploration in GA4. Click on the + button for DIMENSIONS to add the custom dimension Personalized variant. Add STEPS for the visibility and click events and specify a BREAKDOWN by the custom dimension.

While personalization is enabled, the reporting in your analytics tool will eventually show significant results on the variants.

Step 5: Evaluate the personalized variants

The last step is to check how well the personalized variants performed. In this example, you will compare the CTR of a personalized variant with the CTR of the same page elements during a period before it was personalized.

Use this online calculator to compare your personalized variants against non-personalized variants from periods before personalization was added:

1. Fill the values for Visitors A and Visitors B fields as follows:

• Visitors A: Use the number of users that visited the page from a previous period before the personalization was implemented.

• Visitors B: From the personalization report created above, copy the number of users from the Personalization impressions for one of the personalized variants.

2. Fill the values for the Conversions A and Conversions B as follows:

• Conversions A: Use the number of users that completed the same click event on the page from a previous period before the personalization was implemented.
• Conversions B: From the personalization report created above, copy the number of users who completed the click event for the same personalized variant used for the Visitors B field.

3. After you apply the changes, this calculator indicates if your result is significant or not and the conversion rate of the non-personalized variant before personalization versus the conversion rate of your personalized variant.

4. Repeat these steps for each personalized variant to understand how well each variant performed.

Congratulations, you have successfully implemented Personalization and used it to improve the customer experience on your web app.

Other use cases

This guide explains just one use case for personalization. Below we list a few more common options.

Segments from external CRM/CDP systems

It is possible to personalize Prepr content based on segments maintained in other CDP/CRM systems or segments based on UTM tags (for instance from an ad campaign). This means that customer data doesn't have to be imported into Prepr. In this case, you need to reference these external segments from within Prepr using the segment unique identifier from that system or the UTM tag.

Your personalization flow will look like this:

1. Create a new segment in Prepr and set the ID value to the segment unique identifier copied from your CRM/CDP system or the UTM tag.

2. Create and personalize a stack field. See Step 2 from the instructions above.

3. Retrieve personalized content using the API as shown in Step 3 with one difference — you must pass the Prepr-Segments header instead of Prepr-Customer-Id. For more information, refer to our API documentation.

4. If the segment is based on external customer data, ensure that your front end is connected to the external CRM/CDP system for data retrieval.

Call-to-actions

Personalizing call-to-actions can significantly increase conversion rates. Offer each segment the call-to-action that fits best. For example, show a relevant whitepaper to first-time visitors and offer a demo to returning visitors.

Categories

Do you have content or products in different categories? Capture which categories your visitors view and display them on the homepage on their next visit.

Want to learn more?

Check out the following chapters:

• Capturing event data
• A/B testing
• Recommendations
• Connecting your front-end application

Schedule a free consultation

Do you want to get started with personalization but still have questions or want a demo? Book a free call with a Prepr solution engineer: