govtnz/googletracking

A SilverStripe模块,支持灵活的页面和事件级别跟踪到Google Analytics

安装: 156

依赖项: 0

建议者: 0

安全性: 0

星星: 8

关注者: 7

分支: 3

开放问题: 0

语言:JavaScript

类型:silverstripe-module

dev-master 2016-07-10 21:16 UTC

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