Add Facebook Pixel specific page in VUE SPA-CodePudding

I have issue for adding specific facebook pixel for SPA Aplication in vue

<script>
  !(function(f, b, e, v, n, t, s) {
    if (f.fbq) return;
    n = f.fbq = function() {
      n.callMethod
        ? n.callMethod.apply(n, arguments)
        : n.queue.push(arguments);
    };
    if (!f._fbq) f._fbq = n;
    n.push = n;
    n.loaded = !0;
    n.version = '2.0';
    n.queue = [];
    t = b.createElement(e);
    t.async = !0;
    t.src = v;
    s = b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t, s);
  })(
    window,
    document,
    'script',
    'https://connect.facebook.net/en_US/fbevents.js'
  );
  fbq('init', 'test');
  fbq('track', 'PageView');
  fbq('track', 'CompleteRegistration');
</script>
<noscript>
  <img
    height="1"
    width="1"
    src="https://www.facebook.com/tr?id=1234456789&ev=PageView
  &noscript=1"
  />
</noscript>
<!-- End Facebook Pixel Code -->

i want to add this to my page domainname/register

how to add script head and no script head for specific page in Single Page Application VUE

CodePudding user response：

You can render this script based on the current route name.

First this has to be inside the mounted Vue app (Within <router-view/>) ex: inside a layout component if you have it.

Important, adding the script directly inside the Vue app could cause problems. Therefore, better to move your script to a js file in your assets folder ex: /js/fbq.js.

After that check the current route to render it like this:

<!-- Render based on route -->
<component v-if="$route.name == 'register'" :is="`script`" src="/js/fbq.js" async></component>

CodePudding user response：

Step 1: Add facebook pixel code in your public/index.html inside <head> tag

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '266xxxxxxxx1');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=266xxxxxxxx1&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Step 2: Inside your component computed, methods, created you can do,

Inside methods you can do,

methods: {
  addtoCart() {
    window.fbq('track', 'Add to your shopping cart')
  }
}

Inside computed you can do like

computed: {
  formattedRating () {
    window.fbq('track', 'Format your rating')
    return this.fixedPoints === null
      ? this.currentRating
      : this.currentRating.toFixed(this.fixedPoints)
  },
}

Inside created you can do like,

created() {
  this.loadPressRelease()
  window.fbq('track', 'Load press release')
},

You can call the facebook pixel event faq function using window.faq in any components