如何解决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”实际上何时准备就绪,然后再尝试对其进行任何操作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。