Personalize the Jamstack with Prismic Slicemachine, Uniform, and Nuxt

1{
2  "results_size": 144,
3  "results": [
4    {
5      "id": "my_item_id",
6      "title": "Item Title",
7      "description" : "Description of the item.",
8      "image_url" : "http://...",
9      "last_update" : 1509364426938,
10      "blob": {
11        // ...Uniform Intent Tag information
12      }
13    },
14    // ...
15  ]
16}

1const fetch = require('node-fetch')
2
3function mapIntents(intents) {
4  return intents.map((intent) => {
5    return {
6      id: intent.id,
7      title: intent.name,
8      description: intent.description,
9      image_url:
10   'https://pbs.twimg.com/profile_images/1235674864649830400/kd3pN6iU_400x400.jpg',
11      last_update: Date.now(),
12      blob: {
13        [intent.id]: {
14          str: intent.signals[0].str,
15        },
16      },
17    }
18  })
19}
20
21exports.handler = async (event, context) => {
22  const res = await fetch('https://uniform.app/api/v1/preview', {
23    method: 'get',
24    headers: {
25      'x-api-key': 'YOUR_UNIFORM_API_KEY',
26    },
27  })
28
29  const data = await res.json()
30
31  return {
32    statusCode: 200,
33    headers: {
34      'Content-Type': 'application/json',
35    },
36    body: JSON.stringify({
37      results_size: data.site.intents.length,
38      results: mapIntents(data.site.intents),
39    }),
40  }
41}

1// this.$uniformOptimize comes from Nuxt context
2// this.data.intentTag comes from the Prismic Slice data
3this.$uniformOptimize.trackBehavior(this.data.intentTag)

1// Nuxt.config.js
2// For module options see the docs
3module.exports = {
4  modules: ['@uniformdev/optimize-nuxt']
5}

1<template>
2  <main>
3    <slice-zone
4	type="page"
5	:uid="$route.params.uid" 
6	:params="{
7        fetchLinks: links,
8      }"
9    />
10  </main>
11</template>
12
13<script>
14import SliceZone from 'vue-slicezone'
15
16export default {
17  components: {
18    SliceZone,
19  },
20  data() {
21    return {
22      links: `hero.title,
23        hero.description,
24        hero.image,
25        hero.intent_tag`,
26    }
27  },
28	
29  // Uniform: On page reload or query string change
30  // re-evaluate signals for tracking.
31  // This will make sure the intent score is up to date.
32  watch: {
33    '$route.query'() {
34      this.reevaluateSignals()
35    },
36  },
37  mounted() {   
38    // Uniform: On mounted and when the browser has initialized 
39    // re-evaluate signals for tracking.
40    // This will make sure the intent score is up to date.
41    this.$nextTick(() => {
42      this.reevaluateSignals()
43    })
44  },
45  methods: {
46    reevaluateSignals() {
47      if (!this.$uniformOptimizeContext.trackerInitializing) {
48        this.$uniformOptimizeContext.tracker.reevaluateSignals()
49      }
50    },
51  },
52}
53</script>

1<template>
2  <section class="component personalized-hero">

1  <!-- Personalize Vue component needs variant info from Prismic -->    
2    <personalize :variations="variants">

1    <!--
2	In its default slot it gives the correct variant(s) data to
3        show for personalization
4    -->
5      <template #default="{ variations, personalized }">
6        <Hero :data="variations[0]" :tracking="false" />
7        personalized: {{ personalized }}
8      </template>
9    </personalize>
10  </section>
11</template>

1<script>
2import { Personalize } from '@uniformdev/optimize-tracker-vue'
3import Hero from '../../components/Hero.vue'
4export default {
5  components: {
6    Personalize,

1    // The hero component code is shared
2    // between the hero slice and the hero content type.
3    Hero,
4  },
5  props: {
6    slice: { type: Object, required: true },
7  },
8  computed: {
9    // Create a variants object that the Personalize component understands.
10    variants() {
11      return this.slice.items.map((hero) => {
12        return {
13          ...hero.hero_options.data,
14          intentTag: this.mapIntentTagData(hero.hero_options.data.intent_tag),
15        }
16      })
17    },
18  },
19  methods: {
20    // Map Prismic Integration Field data to correct format for 
21    // the personalize component.
22    mapIntentTagData(intentField) {
23      const result = { intents: {} }
24      if (!intentField) {
25        return {}
26      }
27      result.intents = {
28        ...intentField,
29      }
30      return result
31    },
32  },
33}
34</script>

1<template>
2  <section class="hero">
3    <!-- In real life: use Prismic DOM and html serializer library for this -->
4    <h1>{{ data.title[0].text }}</h1>
5    <p>{{ data.description[0].text }}</p>
6    <img :src="data.image.url" width="200" />
7  </section>
8</template>
9<script>
10export default {
11  name: 'Hero',
12  props: {
13    data: { type: Object, required: true },
14    
15    // By default the trackign prop is set to true.
16    // This means it sends a behaviour signal to the
17    // Uniform tracker when it mounts.
18    // See mounted() lifecycle hook below.
19    tracking: { type: Boolean, required: false, default: true },
20  },
21  mounted() {

1    // Set tracking to false when the component should not send signal info.
2    // This happens when it shows as a personalization variant.
3    // See the Personalized Hero Slice code above.
4    if (this.tracking) {
5      this.$uniformOptimize.trackBehavior(this.data.intentTag)
6    }
7  },
8}
9</script>