weixin_39966765
weixin_39966765
2020-12-01 11:48

[inertia-vue] How to configure Google Analytics in Laravel Vue Inertia SPA?

This is my first time building a Laravel-Vue SPA with Inertia JS. Because this is a SPA, Google Analytics can't detect any page visits when user navigating the pages.

In Vue Router, the configuration is something like this:


import Vue            from 'vue';
import router           from './routes.js'

new Vue({
    router,
}).$mount('#app')


ga('set', 'page', router.currentRoute.path);
ga('send', 'pageview');

router.afterEach(( to, from ) => {
  ga('set', 'page', to.path);
  ga('send', 'pageview');
});

How do you do this in Inertia JS?

Note: I'm using Ziggy library to use Laravel routes in my Vue app, so I can use route() helper, but I have no idea how to use it to send the pageview to Google Analytics.

该提问来源于开源项目:inertiajs/inertia

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • weixin_39992483 weixin_39992483 5月前

    AFAIK there isn't the concept of event hooks in Inertia just yet... might be able to clarify?

    点赞 评论 复制链接分享
  • weixin_39977136 weixin_39977136 5月前

    Any updates on this? Can someone provide a solution?

    点赞 评论 复制链接分享
  • weixin_39677870 weixin_39677870 5月前

    Check out the discussion in this PR: https://github.com/inertiajs/inertiajs.com/pull/72

    点赞 评论 复制链接分享
  • weixin_39992831 weixin_39992831 5月前

    For me I used Google Tag Manager and pushed to Google Analytics Universal.

    For movement around inertia links you can track History changes. Ref to discord.

    For specific events (eg. click on button). I added Triggers to that pushes events to GA. Guide here: https://marketlytics.com/analytics-faq/track-button-click-google-tag-manager/

    点赞 评论 复制链接分享
  • weixin_39894778 weixin_39894778 5月前

    The new event system (#208) has been merged in, which makes this a piece of cake using the navigate event!

    js
    Inertia.on('navigate', event => {
      // Track visit via Google Analytics
    })
    

    I hope to tag a release tomorrow, and I also plan to add documentation to the website explaining how to use it. 🙌

    点赞 评论 复制链接分享

相关推荐