Wordpress

Question

我有一个在 Wordpress 中构建的网站，它使用“BWL 知识库管理器”插件，它提供了一个 AJAX 搜索栏。

我们的 SEO 经理为我们提供了以下跟踪脚本，当有人在搜索栏中输入搜索字符串时需要触发该脚本：

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'search'
'Dlv-Search': 'ger', //recorded under “s”
});
</script>

（显然，'ger' 将替换为用户在搜索字段中输入的任何内容）。

事实证明，我对如何实现这个想法知之甚少。谁能在这里指出正确的方向？

Answer 1

这段代码看起来比实际更吓人。您应该能够将其直接添加到您的搜索栏中，或许可以添加到 keydown 或 onchange 事件中。不过，如果将它包装在一个函数中，它可能会更干净。

<script>
    function SO_64130617_search( el, e ){
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'search'
            'Dlv-Search': el.value,
        });
    }
</script>

然后将该函数添加到您想要处理的任何事件的输入中：

<input type="search" id="your-search" onchange="SO_64130617_search(this,event);" />

编辑：

由于您无法修改输入的 HTML，您应该能够将事件处理程序绑定到它。看看这个片段：

var search = document.querySelector('#s');
if( search != null ){
    search.addEventListener('change', function(e){
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'search',
            'Dlv-Search': this.value,
        });

        console.log( window.dataLayer );
    });
}

<input id="s" />

运行代码段和 change 事件将在您离开或单击时立即记录 dataLayer 变量。 change (onchange) 事件要求您离开场地。您可能需要使用 keydown 或 keyup 或其他东西，但这会创建很多函数调用，此时您需要考虑使用输入超时或其他东西。

Answer 2

啊哈！因此，该插件似乎在 DOM 最初加载后以某种方式生成了搜索输入字段。所以这似乎已经成功了：

我已经创建了函数（感谢 Xhynk 的建议）：

function SO_64130617_search( el, e ){
    console.log(el.value);
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'search',
        'Dlv-Search': el.value,
    });
}

然后我将以下内容添加到我的 child-theme 的 footer.php 文件中：

jQuery("#s").ready(function(){
    console.log("I showed up");
    jQuery("#s").change(function(){
        SO_64130617_search(this,event);
    });
});

所以现在它正在等待并检查“#s”何时真正准备好，然后再尝试对其进行任何操作。

Wordpress - 在 AJAX 搜索字段中输入搜索字符串时触发脚本？

Wordpress - Trigger script when search string entered into AJAX seach field?

ajax

seo

event-tracking