CODEWITHSUNDEEP
nuxt.jsheap-analyticsnuxt-link
somecallmejosh
somecallmejosh

Reputation: 1425

How can I properly use Heap Analytics with Nuxt.js Router?

I am using Heap Analytics in a Nuxt.js project. When routing between pages, Heap is displaying the title of the previous page as opposed to the current page. I believe this is an issue with nuxt router because if I change <nuxt-link>'s to regular <a> tags Heap displays the correct (current page) title.

I have heap.load() setup as part of a mixin that fires in the mounted hook. I've also tried to run it in the created hook. They both send the expected data to Heap with the exception of the <title>.

Nuxt config:

head: {
  script: [{ src: '/js/tracking/heap.js' }, ...]
},

plugins: [ '~/plugins/globals.js', ... ]

Plugins:

import AnalyticsTracking from '~/mixins/analyticsTracking.js'
Vue.mixin(AnalyticsTracking)

Mixin:

methods: {
    pageEvent() {
      if (process.client) {
       // avoid the dreaded 'heap.load() is not a function' error that results 
       // when heap is loaded multiple times.
       if (this.$store.state.scriptInit.heapLoaded) return
        
       heap.load(process.env.HEAP_KEY)
       this.$store.dispatch('scriptInit/setHeapLoaded')
      }
     }
 },

Page:

mounted() {
  this.pageEvent()
},
head() {
    return {
      title: this.currentPage.fields.seoTitle,
    }
}

I've read through the Nuxt router docs and do not see anything obvious that is helpful to me. I've attempted to async and defer the loading of the /js/tracking/heap.js, but that doesn't solve the issue either. The only solution I have found so far is by not using Nuxt router, and I would hate to not get the preload/prefetch benefits that come with it.

I would appreciate any advice in helping me solve this issue. Thanks.

Upvotes: 1

Views: 549

Answers (0)

Related Questions