如何使用 JQuery 在 Google Analytics Events 中跟踪 Elementor 表单提交

如何在 Google Analytics Events 中跟踪 Elementor 表单提交

过去几周我一直在开发一个客户端 WordPress 站点,该站点具有相当多的复杂性。 他们正在使用 WordPress 与集成 ActiveCampaign 用于培养潜在客户和 Zapier 整合到 Zendesk出售 通过 元素形式. 这是一个很棒的系统……向需要信息的人启动点滴营销活动,并在需要时将潜在客户推送给适当的销售代表。 Elementor 的形式灵活性和外观给我留下了深刻的印象。

最后一步是通过 Google Analytics 为客户提供分析仪表板,为他们提供表单提交的月度表现。 他们安装了 Google 跟踪代码管理器,因此我们已经在网站上捕获电子商务交易和 YouTube 观看活动。

我多次尝试利用 Google 标签管理器中的 DOM、触发器和事件来捕获 Elementor 的成功表单提交,但根本没有任何运气。 我测试了大量不同的方法来监控页面,观察通过 AJAX 弹出的成功消息,但它不起作用。 所以......我做了一些搜索并从Tracking Chef找到了一个很好的解决方案,称为 使用 GTM 进行防弹 Elementor 表单跟踪.

该脚本利用 jQuery的 和 Google 标签管理器来推送 Google Analytics(分析)活动 当表单成功提交时。 通过一些小的编辑和一项语法改进,我拥有了我需要的一切。 这是代码:

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

挺巧妙的,看提交成功,然后通过 表格 作为类别, 目的地名称 作为行动,和 服从 作为标签。 通过使目标程序化,您可以简单地在每个页面的页脚中使用此代码来观察表单提交。 所以……当您添加或修改表单时,您永远不必担心更新脚本或将其添加到另一个页面。

通过 Elementor 自定义代码安装脚本

如果您是代理商,我强烈建议您为所有客户无限升级和使用 Elementor。 这是一个坚实的平台,合作伙伴集成的数量继续飙升。 将它与一个插件结合起来 联系表格数据库 您还可以收集所有提交的表单。

Elementor临 内置了一个很棒的脚本管理选项。以下是您输入代码的方法:

元素自定义代码

  • 导航 元素 > 自定义代码
  • 命名您的代码
  • 设置位置,在这种情况下结束 身体标签.
  • 如果您要插入多个脚本并设置它们的顺序,请设置优先级。

通过 GTM 向 GA 活动提交 Elementor 表单

  • 点击更新
  • 系统会要求您设置条件并将其设置为所有页面的默认值。
  • 刷新你的缓存,你的脚本就上线了!

预览您的 Google 跟踪代码管理器集成

Google Tag Manager 有一个很棒的机制,可以连接到浏览器实例并实际测试您的代码以观察变量是否被正确发送。 这很重要,因为 Google Analytics 不是实时的。 如果您没有意识到这一点,您可以测试、测试和测试,如果数据没有显示在 Google Analytics 中,您会感到非常沮丧。

我不会在这里提供有关如何操作的教程 预览和调试 Google 标签管理器……我假设你知道。 我可以在我连接的测试页面上提交我的表单,并根据需要查看推送到 GTM 数据的数据:

谷歌标签管理器数据层

在这种情况下,类别被硬编码为表单,目标是联系我们表单,标签是提交。

在 Google Tag Manager 中设置数据变量、事件、触发器和标签

最后一步是设置 Google Tag Manager 以捕获这些变量并将它们发送到为事件设置的 Google Analytics Tag。 Elad Levy 在他的另一篇文章中详细介绍了这些步骤—— Google Tag Manager 中的通用事件跟踪.

设置完成后,您将能够在 Google Analytics(分析)中看到事件!

获取 Elementor Pro

披露:在整篇文章中,我都使用我的会员链接。

6条评论

  1. 1
  2. 3
  3. 5

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.