All geek questions in one place

Facebook Custom Audience Pixel at SinglePageApplication SPA

I have a SinglePageApplication created using AngularJs. I also want to add Facebook Custom Audience to track pixels globally and manually update it every time a user changes the page (url).

Is it possible, and if so, how?

Link: https://developers.facebook.com/docs/reference/ads-api/custom-audience-website-faq/

+6
source share
3 answers

I managed to solve this problem by loading the _fbq object:

<script> (function() { var _fbq = window._fbq || (window._fbq = []); if (!_fbq.loaded) { var fbds = document.createElement('script'); fbds.async = true; fbds.src = '//connect.facebook.net/en_US/fbds.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fbds, s); _fbq.loaded = true; } _fbq.push(['addPixelId', 'XXXXXXXXXXXXXXXXX']); })(); //Notice removed 'PixelInitialized' call. </script>

and then raises the "PixelInitialized" event every time the page changes.

 $window._fbq.push(['track', 'PixelInitialized', {}]);

Since then, facebook has been tracking my audience correctly.

+11
source

Here is what I am doing, it seems to work so far:

In my index.html file, I removed the PageView function and commented out the pixel itself, as shown below.

 <head> <!-- 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','//connect.facebook.net/en_US/fbevents.js'); fbq('init', 'XXXXXXXXXX'); //fbq('track', "PageView"); </script> <!--<noscript><img height="1" width="1" style="display:none"--> <!--src="https://www.facebook.com/tr?id=XXXXXXXXXX&ev=PageView&noscript=1"--> </noscript>--> <!-- End Facebook Pixel Code --> </head>

Then I configure the application as follows:

 .config(['$stateProvider', '$urlRouterProvider', '$windowProvider', function($stateProvider, $urlRouterProvider, $windowProvider) { var $window = $windowProvider.$get();

Now, for each state change, I use onEnter and onExit to disable the “events” that I want to capture:

 .state('foo.bar', { url:'/bar', templateUrl: 'template.html', controller: 'templateCtrl', onEnter: function(){ $window.fbq('track', "Page1Enter"); }, onExit: function(){ $window.fbq('track', "Page1Exit"); } })

I guess if I wanted to, I could just move any fbq('track', "PageView"); code fbq('track', "PageView"); to the controller. However, for my use case, tracking state changes works fine for monitoring the flow from my application.

Hope this helps someone else.

+5
source 
 !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'); // initialize facebook pixel code fbq('init', {SET-YOUR-ID}); // <-- replace {SET-YOUR-ID} with your facebook pixel convesion id // disabled automatic push state for single web application fbq.disablePushState = true; // then call manually track PageView event fbq('track', 'PageView');

In one application for one page (SPA), you should disable automatic listening when you click State, pop State and window history as the default Facebook pixel library, connect to windows.history and push / pop.

according to @lari, answer another question related to you and the Josh Post Blog

+1
source

Source: https://habr.com/ru/post/976362/

More articles:


All Articles