Facebook在SinglePageApplication SPA上定制观众像素
我有一个用AngularJs构建的单页应用程序。我还想在Facebook上添加自定义的观众跟踪像素，并在用户每次更改页面（url）时手动更新。
可能吗？如果可能，如何实现？
参考：https://developers.facebook.com/docs/reference/ads-api/custom-audience-website-faq/
共有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。历史记录和推送/弹出状态。
根据@lari关于你的问题和Josh的博文的另一个相关问题的回答
以下是我正在做的事情，到目前为止似乎很有效：
在我的索引中。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'）
编码到控制器中。不过，在我的用例中，从状态变化进行跟踪对于监控我的应用程序中的流非常有效。
希望这对其他人有帮助。
我通过加载_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>
然后每次页面更改时调用“PixelInitialized”事件。
$window._fbq.push(['track', 'PixelInitialized', {}]);
从那时起，facebook就正确地跟踪了我的受众。
-
控制台-观众 控制台-观众-创建 控制台-观众-删除 控制台-观众-更新 控制台-观众-详情
-
控制台-观众-删除 接口URL {youke-url}/console/Index.php?c=audience&a=delete×tamp=1607677497&access_key=abc&sign=8584a009d9ca9cca94e0331a7960d7ebee2dd0a7 请求方式 POST Content-Type form-data 请求Body参数 参数 示例值 是否必
-
控制台-观众-详情 接口URL {youke-url}/console/Index.php?c=audience&a=info×tamp=1607677497&access_key=abc&sign=db47cabd9b930e7bb91a952c5a21d3cdd6849767 请求方式 POST Content-Type form-data 请求Query参数 参数 示例值 是否必填
-
控制台-观众-更新 接口URL {youke-url}/console/Index.php?c=audience&a=update×tamp=1607677497&access_key=abc&sign=4a875d2ef2a194d11a6c31f4a4568d791e3ae067 请求方式 POST Content-Type form-data 请求Query参数 参数 示例值 是否
-
控制台-观众-创建 接口URL {youke-url}/console/Index.php?c=audience&a=create×tamp=1607677497&access_key=abc&sign=07b4ece336a4f0767a77d3cfe5588803ae8c6097 请求方式 POST Content-Type form-data 请求Query参数 参数 示例值 是否
-
控制台-频道-在线观众列表 接口URL {youke-url}/console/Index.php?c=live&a=audienceList×tamp=1607677497&access_key=abc&sign=04394c5a45b6920bed314e94e178ebcf1dfded74 请求方式 POST Content-Type form-data 请求Query参数 参数
-
控制台-部门-观众列表 接口URL {youke-url}/console/Index.php?c=department&a=audiences×tamp=1607677497&access_key=abc&sign=d24d040ac43a095469809fa401d535ffee607118 请求方式 POST Content-Type form-data 请求Query参数 参数
-
观众量统计 1、 获取用户维度下按小时统计的观众量，该接口仅提供某一天的数据查询。地址为: a https://spark.bokecc.com/api/stats/uniquevisitor/user/hourly 需要传递以下参数： 参数 说明 userid 用户id，不可为空 date 查询日期，日期不能大于今日，格式为yyyy-MM-dd，不可为空 返回数据unique_visitors包