1 参考资料

Facebook快速入门2讲：如何搭建数据监控Pixel？

2 广告相关的业务 facebook pixel

facebook pixel就是用来跟踪用户行为的代码，当网站投放到facebook这个网站的时候，如果需要查看网站投放到facebook上，用户进来此网站的投放效果，那么我们的网站就需要接入facebook pixel，对于网站来说facebook pixel的官方名称为Meta Pixel 像素代码

2.1 涉及到的具体业务

Meta Pixel 像素代码接入官方文档

2.1.1 onelink(通过落地页引导用户前往网站或者下载apk)

具体业务是通过（产品｜运营）在facebook的广告投放后台添加一个onelink链接，将链接发给前端开发，前端同学开发完落地页后，此落地页在facebook上进行投放，当facebook用户进入此网页后，此落地页的跳转（按钮点击｜页面自动重定向）的具体内容就是onelink链接。

onelink举例如下，这里应该有一层重定向跳转，重定向跳转的内容应该是我们的网站带上pixel id的链接。

https://pppponline.onelink.me/q1vS?af_xp=social&pid=Social_facebook&c=UpGrowthPM

具体业务代码

pixel sdk引入

<!-- 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');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

重定向跳转 onelink的内容

import { query } from "./index";
// cookie options
function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0)
      return c.substring(nameEQ.length, c.length);
  }
  return null;
}
const getUUID = () => btoa(Math.random().toString());
const getExternal_id = () => {
  const lots_id = getCookie("lotsaslots_external_id") || "";
  if (lots_id) return lots_id;
  const lotsaslots_external_id = getUUID();
  setCookie("lotsaslots_external_id", lotsaslots_external_id, 365);
  return lotsaslots_external_id;
};

// 生成uuid，进行SHA256 hash加密，得到external_id
const external_id = getExternal_id();
const pixelid = query?.pixelid || '1101376491200956';
const onelink = query?.onelink ? decodeURIComponent(query?.onelink) : 'https://pookeonline.onelink.me/q1vS?af_xp=social&pid=Social_facebook&c=Basic_ONE'
const h5_id = query?.h5_id || 'TG00002'
const APP_CONFIG_MAP = {
  pixelid,
  onelink,
  h5_id,
}

// 初始化pixel id  记录落地页打开情况
export const initPixelCode = () => {
  const fbq = typeof window.fbq === 'function' ? window.fbq : _ => _
  console.log('fbq', fbq)
  fbq('init', APP_CONFIG_MAP.pixelid, { external_id: external_id })
  fbq('track', 'PageView')
}

// 核心关键： 落地页引导facebook用户前往目标网站或者apk的关键代码
export const getJumpLink = () => {
  const fbp = getCookie("_fbp") || "";
  const fbc = getCookie("_fbc") || "";
  const clickTime = new Date().getTime()
  const fbDeepLinkValue = {
    ad_media_type: 'facebook',
    app_click_time: clickTime,
    fbp: fbp,
    fbc: fbc,
    pixel_id: APP_CONFIG_MAP.pixelid,
    external_id: external_id,
    h5_id: APP_CONFIG_MAP.h5_id,
  }

  console.log('fbDeepLinkValue', fbDeepLinkValue)

  const jumpLink =
    APP_CONFIG_MAP.onelink +
    '&deep_link_value=' +
    encodeURI(JSON.stringify(fbDeepLinkValue))

  console.log('jumpLink:', jumpLink)
  return jumpLink
}

研发开发完毕后，如何验证pixel归因生效？

用google开发者模式打开落地页，查看cookie里面是否有_fbc的值，如果没有则从这个网站上developers.facebook.com/docs/market… 获取后将这个值新增进去。

添加完毕后，将落地页打印的跳转链接转成二维码后，使用手机进行跳转｜下载对应apk。让运营｜产品同学查看是否facebook后台上有归因记录，有则是正确的。

2.1.2 网站如何追踪facebook用户行为

具体业务是运营通过投放onelink链接（落地页）引导facebook用户进来此网站，这时候网站的链接上会带上pixel id，这时候网站就可以绑定此pixel id进行用户行为的追踪，与2.1.1 进行关联。

<!-- 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');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

业务逻辑上

export const getQuery = (): Query => {
  const query: Query = {}
  window.location.search.substring(1).split("&").forEach((item) => {
    let [key, value] = item.split('=')
    query[key] = value
  })

  return query
}
export const query = getQuery()
fbq("init", `${query["pixelId"]}`, { external_id: data?.uid });
fbq("track", "PageView");
fbq("track", "CompleteRegistration", {
    status: true,
    uid: data?.uid,
});

{your-pixel-id-goes-here}在业务上通过原子参数带入给网站的，这么做的原因是业务有很很多个渠道在投放(pixel id)

2.2 如何获取`{your-pixel-id-goes-here}`

2.3 如何查看广告投放效果

3 在facebook上让用户唤起google浏览器

在android webivew里面唤醒打开“chrome”App，网页想要打开“xxx”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="onGoOut2()">intent方式打开</button>
</body>
<script>
    const onGoOut2 = () => {
        var url = 'https://testwww.pooke.com'  // 获取当前的url地址
        var newUrl = url.replace(/^https:\/\//, '')  // 进行截取 https:// 后面的链接参数
        var intentUrl = `intent://${newUrl}#Intent;scheme=https;package=com.android.chrome;end` // package 打开的应用
        window.location.href = intentUrl
    }
</script>

</html>

看了facebook官方的文档说明，发现并没有起效果。

facebook业务相关