谷歌分析(GA)事件追踪
Google Analytics Event Tracking
您可以添加GA事件跟踪到带有Impreza主题任何元素。在大多数时候,你只需要在发送时间信息的片段,添加additional class元素,并添加一个简单的JS的代码。
本指南不包括为您的网站基本的谷歌Analytics(分析)设置。如果您需要基本的设置信息,请访问这个页面。另外,如果你是GA活动时间新手,推荐阅读阅读本指南。
以下是主题元素跟踪应用的3个实例:
按钮:自定义CSS类的例子#
你可以在一个页面上有很多按钮,你可能需要添加一些追踪事件的按钮。这就是为什么一个附加到特定按钮的事件是非常重要的。幸运的是大多数的主题元素在他们设置的额外类名称(Extra class name)的字段,所以你可以用它区分需要的元素。
因此,第一步,创建一个新的按钮,设置想要的网址,标签Label和其他参数,可以再加入独特的额外的类“Extra class name”字段:
然后添加 RAW JS元素在它下面,并添加如下代码:
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.ga-sample-btn').on('click', function() { ga('send', 'event', 'Buttons', 'click', 'Sample Button'); }); }); </script>
这些元素看起来像这样:
现在,如果你保存的页面,点击按钮,它会发出GA事件与
名为“Buttons”类别(class),
名为“Click”动作(action),
名为“Sample Button”的标签(label)。
联系方式:用于内部部件的例子#
让我们尝试一些更复杂的:我们将发送GA事件不是针对整个元素,但其组件。
同以前的例子,首先创建一个新的联系人元素。填写,并添加独特的一类,因为有时你可能有这样几个要素:
正如你可能会注意到,我们已经加入链接,电话,所以当被点击它,手机应用程序可以打开。现在保存的页面并查看浏览器的新选项卡中的结果。然后用网页检查你可能会发现可用于JS的onClick事件连接内部组件的类:
然后添加 RAW JS元素在它下面,并添加如下代码:
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.ga-sample-contacts .w-contacts-item.for_email a').on('click', function() { ga('send', 'event', 'Contacts', 'click', 'Email'); }); jQuery('.ga-sample-contacts .w-contacts-item.for_phone a').on('click', function() { ga('send', 'event', 'Contacts', 'click', 'Phone'); }); }); </script>
正如你所见,我们2个GA事件发送添加代码 – 一个用于电子邮件,一个用于手机。我们使用独特的课堂上,我们增加了,那么类所需要的组件,然后的一个标签名称,因为这两个电话和电子邮件与代表的联系的。
联系表单:表格提交的例子#
在这个例子中,我们要证明你可以将GA事件,发送不仅要一个简单的点击,但几乎所有的JS事件发生在页面上。有时候,这是好事,知道有多少次您的联系方式提交(这甚至包括情况下,它被提交但由于验证错误发送时),并获得比较实际的电子邮件数量。
在这个例子中,我们不会一个独特的类添加到形式,因为通常在页面上只有一个联系表元素。但是,如果你需要,你可以自定义类添加到您的形式,并用它你的JS代码。
所以,首先添加的形式,填写,保存和更新页面。然后在新的浏览器选项卡中查看该页面,并使用Web检查发现窗体类。
我们将使用类形式的容器,“.w-form.for_cform”。如上,添加 RAW JS元素在它下面,并添加如下代码:
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.w-form.for_cform form').on('submit', function() { ga('send', 'event', 'Contact Forms', 'send', 'Sample Form'); }); }); </script>
现在,每次当用户点击表单按钮,它会发送
“contact from”类别的GA事件,
“Send”的行动,和
“Sample Form”的标签。