WordPress Contact Form 7添加FB像素后无法触发事件求助

嘿，我来帮你搞定这个问题！你写的代码里藏着几个关键错误，导致Facebook像素事件根本没法触发，咱们一步步拆解修复：

问题出在哪？ #

你的代码在document.addEventListener的回调函数里混入了HTML注释和<script>标签——这些是HTML语法，不是JavaScript语法，浏览器直接就会报错，整个回调函数都没法执行。另外，像素初始化代码也不该放在表单提交事件里，重复初始化反而可能出问题。

正确的实现方式 #

咱们分两步来，把初始化和事件触发分开：

第一步：全局初始化Facebook像素 #

把像素的初始化代码放在网站的全局位置（比如主题的header.php文件里，</head>标签之前），确保页面加载时只执行一次初始化：

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

第二步：在Contact Form 7里添加提交事件触发代码 #

打开Contact Form 7的「附加设置」板块，只保留监听表单提交并触发事件的代码：

document.addEventListener( 'wpcf7submit', function( event ) {
    // 当表单提交成功时，触发lead_sent事件
    fbq('track', 'lead_sent');
}, false );

备选方案：不用修改主题文件的合并写法 #

如果你不想碰主题文件，也可以把两段代码合并成纯JavaScript，放在「附加设置」里，注意要去掉所有HTML标签：

// 确保像素只初始化一次
if (typeof fbq === 'undefined') {
    !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', '18015239334xxxxx');
}

// 监听Contact Form 7的提交事件
document.addEventListener( 'wpcf7submit', function( event ) {
    fbq('track', 'lead_sent');
}, false );

验证是否生效 #

提交表单后，你可以通过两种方式验证：

• 打开Facebook事件管理器，查看对应的像素是否接收到lead_sent事件；
• 在浏览器控制台输入fbq.getState().events，检查事件队列里是否有刚触发的lead_sent记录。

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