js-Facebook像素代码

分类于

js-Facebook像素代码

相关资料

前置物料

  • Facebook 开发者
  • Facebook bm, 与 开发者绑定好

获取像素 id 和 access token

  1. 打开 bm 后台, 地址: https://business.facebook.com/events_manager2/list

    打开 bm 事件管理

    image-20230629151526636

  2. 点击对应的 bm, 获取像素 id

    image-20230629151706225

  3. 点击对应的 bm, 获取 access token

    image-20230629151850538

前端像素代码配置

  1. 直接在 html 中配置, 参考文档: https://developers.facebook.com/docs/meta-pixel/get-started

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!-- Meta 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', '123123123');
      fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=123123123&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Meta Pixel Code -->
    • 上面 123123123 就是像素 id

后端服务器上传事件

  1. Python 代码, 参考

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    def test_fbEventApi(self):
        accessToken = "asdasdasd" # access token
        pixelAppId = "123123123" # 像素 id
        data = [
            {
                "action_source": "website",
                "event_id": 12345,
                "event_name": "TestEvent03",
                "event_time": utils.nowTs(),
                "user_data": {
                    "client_user_agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Mobile/15E148 Safari/604.1",
                    "em": "f660ab912ec121d1b1e928a0bb4bc61b15f5ad44d5efdc4e1c92a25e99b8eccc"
                },
                "custom_data": {  # 自定义其他事件
                    "currency": "USD",
                    "value": "142.52"
                },
            }
        ]
        txt = quote(utils.beautyJson(data, indent=None), 'utf-8')  # encode

        url = "https://graph.facebook.com/v17.0/{}/events?data={}&access_token={}".format(pixelAppId, txt, accessToken)
        print("--- url: ".format(url))
        code, rspDct = utils.httpPost(url=url)
        assert code == 200, "--- 上报事件失败, code: {}, rspDct: {}".format(code, rspDct)
        utils.printJson(rspDct, tips="msg")

    • 正常返回

      1
      2
      3
      4
      5
      6
      {
        "events_received": 1,
        "messages": [
        ],
        "fbtrace_id": "asdasd"
      }

    • 错误返回

      ```json
      {

      "error": {
  "message": "The access token could not be decrypted",
  "type": "OAuthException",
  "code": 190,
  "fbtrace_id": "asdasd"
}

      }

fbclid 参数获取并上报

可视化测试事件

  • 网页测试

    image-20231009154318697

    image-20230629155312975

查看事件

  • 前后端接入成功后, 都会在 bm 后台可以看到数据

    image-20230629152834191