Set up data collection with tracking

Add the tracking code

Adding the Prepr tracking code to your front end allows you to capture visitor (Customer) data and lets you track how they engage with your content.

1. In the plugins folder, create a new file called tracking.client.js and add the code below.

   ./plugins/tracking.client.js

   export default defineNuxtPlugin(() => {
       // This code runs only on client because of `.client.js`
       if (typeof window !== 'undefined') {
    
       // Prepr Tracking Pixel 
           <YOUR-PREPR-CODE-SNIPPET>
    
   }
   });

2. In your Prepr environment, go to the Settings → Event tracking page.

3. Copy the Prepr tracking code and paste it into the placeholder YOUR-PREPR-CODE-SNIPPET above.

   

4. Remove the HTML tags <!-- Prepr Tracking Code -->, <script> and </script> tags from the embedded code.

5. Refresh your website page in the browser. If there are no errors in the terminal console, the tracking code has been added successfully.

Track page view events

For the subsequent A/B testing and personalization sections in this guide, we want to track page view events. To do this, add a content item meta property to the index.vue file like in the highlighted code below. The tracking code automatically recognizes this property and records the view event in Prepr. Check out the data collection events docs for more details.

<template>
  <meta property='prepr:id' :content="page._id"/>
    
  <!--Loop through elements in the queried stack and set the data variable to the components you want -->
  <component
        v-for="element in stack"
        :key="element._id"
        :is="getComponent(element.__typename)"
        :data="element"
    ></component>
</template>
 
<script setup>
    import { computed } from "vue";
    import { reactive } from "vue";
    import { GetPageBySlug } from "@/queries/get-page-by-slug";
 
     // Import the components
    import HeroSection from "@/components/hero-section";
    import FeatureSection from "@/components/feature-section";
 
    const route = useRoute();
    
    // Set up the components
    const components = [
    { name: "Hero", comp: HeroSection },
    { name: "Feature", comp: FeatureSection },
    ];
 
    // Assign the components for the stack loop above
    const getComponent = (name) => {
    const component = components.find((component) => component.name === name);
    return component ? component.comp : null;
    };
 
    const { data } = await useAsyncQuery({
        query: GetPageBySlug,
        variables: {
          slug: route.params.slug ? route.params.slug.join('/') : '/'
        }
    });
 
    {/* Output the query results to the console */}
    console.log(JSON.stringify(data, undefined, 2));
 
  // Assign the page and stack variables with the queried results
    const page = data.value.Page;
 
    const stack = computed(() => {
        return page.content;
    });
</script>

For more details on how to track other types of events, check out the data collection docs.

Test data collection

You can easily check if the data collection is successful with the following steps.

1. Restart your localhost with npm run devand go to your website.

2. In your Prepr environment, go to the the Segments page.

3. If the page view is recorded successfully you'll see a recent customer in the All customers list.

4. Click to open this customer and you should see the View event on the Homepage similar to the image below.