0

I'm using this library called barba.js and trying to implement google analytics and facebook analytics.
I implemented it as mentioned in the official documentation but as barba.js doesn't reload header and footer again and again and just reload the barba-container div, which was causing google analytics to record only the pageview on first page where the user lands and not the other pages.

This issue was resolved by calling it in onEnterCompleted hook of the views and its resolved.

But the issue I'm facing right now is facebook analytics which is mentioned below.

window.fbAsyncInit = function() {
FB.init({
  appId      : 'xxxxxxxxxxxxx',
  cookie     : true,
  xfbml      : true,
  version    : 'v3.3'
});
FB.AppEvents.logPageView();   


};

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

If I take this code in Barba.js view's onEnterCompleted hook, it'll be recalled again and again but I'm not sure if this is a best practice or not or if this will work as expected.
If someone has implemented facebook analytics with barba.js, please share your example.
Many Thanks !

EDIT: I've implemented google analytics this way with barba.js after seeing this link.

function analytics() {
    var path = (window.location.href).replace(window.location.origin, '').toLowerCase();

    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-xxxxxxxx-x', {
        'page_path': path
    });
    console.log('view sent', path);
}

I created this function and called it in view's onEnterCompleted which resolved the issue with google analytics

Muhammad Osama
  • 985
  • 8
  • 17

0 Answers0