如何不依赖PHP将JavaScript变量传入Facebook Pixel事件参数

现有JavaScript代码 #

1. 获取URL参数的代码

<script>
<!-- Start TID Variable -->
    var texTag='utm_camp';
    var pageURLString=new RegExp("[?&]"+texTag+"=([^&#]*)").exec(window.location.href);
    var externalIdVar=pageURLString[1]; // 每次获取到的目标变量
<!-- End TID Variable -->
</script>

2. Facebook Pixel代码

<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', '1234567891011');
  fbq('track', 'PageView', 
        {
            tid: '' // 需要传入externalIdVar的值
        });
</script>

不可用的PHP方案 #

之前找到的PHP方案无法在Clickfunnels平台运行：

<?php echo $variable = "<script> document.write(externalIdVar) </script>"; ?>

纯JavaScript解决方案 #

直接在Facebook Pixel的track调用中使用externalIdVar即可，同时建议增加参数不存在的容错处理，避免页面报错：

<script>
<!-- Start TID Variable -->
    var texTag='utm_camp';
    var pageURLString=new RegExp("[?&]"+texTag+"=([^&#]*)").exec(window.location.href);
    // 容错处理：如果URL中没有utm_camp参数，赋值为空字符串
    var externalIdVar = pageURLString ? pageURLString[1] : ''; 
<!-- End TID Variable -->
</script>

<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', '1234567891011');
  fbq('track', 'PageView', 
        {
            tid: externalIdVar // 直接传入变量值
        });
</script>

关键说明

• 无需额外PHP或document.write操作，直接将externalIdVar赋值给tid字段即可
• 增加的判断逻辑可以避免当URL中没有utm_camp参数时，出现Cannot read properties of null的报错

内容的提问来源于stack exchange，提问作者WideProjection