Question

我有一个使用AngularJs构建的SinglePageApplication。我想要全局添加Facebook自定义受众群体跟踪像素，并在每次用户更改页面（网址）时手动更新。

是否可能，如果可能，怎么样？

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

Answer 1

我设法通过加载_fbq对象来解决这个问题：

<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>

然后调用＆＃39; PixelInitialized＆＃39;每次页面更改时的事件。

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

此后，facebook正确跟踪我的受众群体。

Answer 2

到目前为止，这就是我正在做的事情：

在我的index.html文件中，我删除了PageView函数并注释掉了像素本身，如下所示。

<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>

然后，我按照以下方式配置我的应用程序......

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

现在，对于每个状态更改，我使用onEnter和onExit来触发我想要捕获的“事件”：

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

我猜测，如果我愿意，我可以简单地将任何fbq('track', "PageView");代码移动到控制器中。但是，对于我的用例，跟踪状态更改可以很好地监控我的应用程序中的流量。

希望这有助于其他人。

Answer 3

!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');

进入单页应用程序（SPA）您必须禁用自动侦听推送状态，弹出状态和Windows历史记录作为Facebook像素库默认挂钩到windows.history和推/弹状态。

根据@lari回答about another related question to your question和Josh's Post blog

SinglePageApplication SPA上的Facebook自定义受众像素

3 个答案: