govtnz / googletracking
A SilverStripe模块,支持灵活的页面和事件级别跟踪到Google Analytics
Requires
This package is auto-updated.
Last update: 2024-09-21 20:23:36 UTC
README
Google Tracking模块使向您的网站添加跟踪变得更容易。它提供两种基本机制
- 页面级别跟踪,可自动连接到您的页面
- 事件级别跟踪,用于在DOM事件上附加跟踪动作。
配置
确保您的网站部分包含以下内容
<head>
...
$GoogleTrackingConfig
...
</head>
这将包括Google API配置信息的标签。
只能在您的网站config.yml中设置的配置属性包括
- self_hosted_tracking_js - 如果为1,将提供模块的Google universal_analytics.js脚本的副本。这是禁止包含跨域脚本的网站。
此外,您需要通过以下方式引导模块的javascript组件
(function($) {
var tracker = $.tracker;
$(document).ready(function () {
// add calls to tracker.addEventDef here if you are using them
...
tracker.init(500);
});
}) (jQuery);
如果您更喜欢简短的形式
(function($) {
$(document).ready(function () {
$.tracker.init(500);
});
}) (jQuery);
init()的参数在加载Google Analytics JavaScript有延迟时使用。Init将在加载后等待,并在每次重试前等待这个时间段(以毫秒为单位)。
页面级别跟踪
该模块将自动将自己添加到ContentController中,因此包含网站上所有页面的页面跟踪。但是,如果您有一个自定义控制器,它没有扩展ContentController,但您想添加跟踪行为,也可以将扩展添加到您的控制器中
MyCustomController:
extensions:
- GoogleTrackingControllerExtension
事件跟踪
使用DOM类
该模块支持通过装饰您的标记以属性的方式直接对DOM元素进行跟踪事件注册。例如,为了跟踪页面的头部图标的点击,您可能有如下标记
<div class="logo">
<a href="$HomePageLink"
data-ga-event="click"
data-ga-category="navigation"
data-ga-action="header-logo"
data-ga-label="@attr:href"></a>
</div>
这将点击元素时将跟踪数据发送到Google。类别和动作作为提供的文本值发送。发送的标签是点击标签的href属性值,在这种情况下是链接到的URL。
支持的所有属性的完整列表是
data-ga-event
name of event to listen to. Can be 'click', 'submit' or 'pageload'.
data-ga-category
category sent in tracking event
data-ga-action
action sent in tracking event
data-ga-label
label sent in tracking event
data-ga-value
value sent in tracking event
data-ga-noninteractive
if "true" or "1" then event is sent as non-interactive
data-ga-terminate
if "true" or "1" then event stopPropagation and preventDefault
are called.
data-ga-delay
if specified, it's value needs to be the number of milliseconds
to delay before triggering.
data-ga-cond
if specified, the value is evaluated to determine if the tracking
event should be sent. If null, empty string, false or 0, or an
array whose length is zero (including jQuery objects), the
tracking event won't be sent. Otherwise it will be.
data-ga-category、data-ga-action、data-ga-label、data-ga-value和data-ga-cond属性都使用相同的语法来指定值。如果属性值以“@”开头,则值指定了一个获取值的表达式。否则,值被视为文本。如果使用@-表达式,它可以有以下形式
@attr:name
get attribute value of this element
e.g. data-ga-label="@attr:href"
@attr:name,@sel:selector
get attribute value of another element
e.g. data-ga-label="@attr:value,@sel:#myfield"
@attr:name,@sel:someSelector,@this
get attribute value of another element, but within the current element i.e uses $(someSelector, $el)
e.g. data-ga-label="@attr:value,@sel:span,@this"
@text
get the inner text of the target element. Equivalent to calling
$target.text()
@call:functionName
call a named function to evaluate the value. This may be prohibited
by content policy. The function is called with the matching
element as a parameter. The function name is evaluated in the
global name space.
e.g. data-ga-label="@call:someobject.myMethod"
注意您还可以注入模板变量,这允许服务器端确定
<div class="logo">
<a href="$HomePageLink"
data-ga-event="click"
data-ga-category="$NavigationCategory"
data-ga-action="header-logo"
data-ga-label="@attr:href"></a>
</div>
使用JavaScript事件
如果您更喜欢使用JavaScript来启动事件跟踪,或者有不符合简化DOM类机制的需求,该模块还支持通过jQuery选择器注册DOM监听器。
与使用DOM类相比的优点是您可以编程控制发送到Google的属性。缺点是无法轻松注入属性值。
tracker.addEventDef(
'myEvent',
'click',
'',
'.ga-content-container a[rel!="external"]',
null,
100,
0,
{
"eventCategory": "navigation",
"eventAction": function() { return 'linked-content' },
"eventLabel": function() { return $(this).attr('href') },
"eventValue": function() { return null },
"nonInteraction": false
}
);
这是通过针对匹配选择器的DOM元素注册监听器来工作的。参数是
id (string)
a unique name you give to each rule
names
event name, such as "click" or "submit"
bodyClasses (string)
if present, rule only applies if body matches these classes.
selector (string)
selector to match against. Event listener is attached to this
element.
delegate
if set, it is a selector that the listener is attached to instead
of the selector, and the selector is used to filter components.
Correlates to $(delegate).on(names, selector)
delayMS
if set, specifies a number of milliseconds to wait before triggering the event using jQuery.simulate. Also terminates
the originating event.
terminateEvent
if true, causes event.preventDefault and event.stopPropagation.
googleEventData (object)
an object to pass to GA tracking. The object can have properties:
eventCategory
eventAction
eventLabel
eventValue
nonInteraction
The first 4 parameters can be a literal string, or can be a
function that returns a string.
注释
可能需要包含jquery simulate 依赖于框架jquery