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

问题描述

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

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

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

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

事实证明，我对如何实现此目标几乎一无所知。有人可以在这里向我指出正确的方向吗？

解决方法

此代码看起来比实际的还要令人生畏。您应该可以将其直接添加到搜索栏中，也许在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之类的东西，但这会创建很多函数调用，这时您需要使用键入超时之类的东西。

,

啊哈！因此看来，该插件在最初加载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,});
}

然后我将以下内容添加到我的孩子主题的footer.php文件中：

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

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