我们的一位客户有 Elementor,WordPress 最强大的页面构建平台之一。 在过去的几个月里,我们一直在帮助他们清理入站营销工作,最大限度地减少他们实施的定制,并让系统更好地沟通——包括分析。
客户有 在线聊天,一个出色的聊天服务,在聊天过程的每一步都具有强大的 Google Analytics 集成。 LiveChat 有一个非常好的 API,可以将其集成到您的网站中,包括能够使用锚标记中的 onClick 事件弹出打开聊天窗口。 看起来是这样的:
<a href="#" onclick="parent.LC_API.open_chat_window();return false;">Chat Now!</a>
如果您能够编辑核心代码或添加自定义 HTML,这将非常方便。 和 Elementor,但是,出于安全原因,该平台已被锁定,因此您无法添加 点击事件 对任何物体。 如果您将自定义 onClick 事件添加到代码中,则不会出现任何类型的错误……但您会看到代码从输出中删除。
使用 jQuery 监听器
onClick 方法的一个限制是您必须编辑站点上的每个链接并添加该代码。 另一种方法是在页面中包含一个脚本 监听 对于您的页面上的特定点击,它会为您执行代码。 这可以通过寻找任何 锚标签 具有特定的 CSS类. 在这种情况下,我们指定一个带有名为的类的锚标记 openchat
.
在网站的页脚中,我添加了带有必要脚本的自定义 HTML:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('.openchat a').click(function(){
parent.LC_API.open_chat_window();return false;
});
});
</script>
使用 JavaScript 监听器
或者,这里是使用 JavaScript 的代码:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var openchatElements = document.querySelectorAll('.openchat');
openchatElements.forEach(function(element) {
element.addEventListener('click', function() {
if (parent.LC_API && parent.LC_API.open_chat_window) {
parent.LC_API.open_chat_window();
}
return false;
});
});
});
</script>
现在,该脚本是站点范围内的,因此无论页面如何,如果我有一类
公开聊天 单击它,它将打开聊天窗口。 对于 Elementor 对象,我们只需将链接设置为 # 并将类设置为 公开聊天.当然,代码可以增强或用于任何其他类型的事件,例如 Google Analytics(分析)活动. 当然,LiveChat 与添加这些事件的 Google Analytics 有出色的集成,但我将其包括在下面只是作为示例:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('.openchat a').click(function(){
parent.LC_API.open_chat_window();return false;
gtag('event', 'open_chat_window', {
'event_category': 'Chat Interaction',
'event_label': 'Live Chat Opened'
});
});
});
</script>
使用 Elementor 构建网站非常简单,我强烈推荐该平台。 这里有一个很棒的社区、大量的资源以及很多增强功能的 Elementor 附加组件。