Event Tracker Plugin

• Event Tracker Plugin
• Plugin options
• Example tag configuration
• Plugin configuration options
• Standard event tracking
• Social event tracking
• Custom event tracking
• Standard event tracking details
• Limitations
• Dependencies
• Learn more

This plugin is designed to send event tracking based on pre-defined custom selectors. The event tracking is implemented using CSS selectors for a jQuery-type experience.

Tracking construction is extremely flexible, the basic structure is:

• eventTrigger: the DOM event(s) to create event listeners for

• selector: the CSS selector to trigger the tracking event

• eventCallback: a function that is executed when the event is triggered

• finish: a function that is executed after the tracking call has been sent

Use the following to help understand the plugin:

• The plugin merges the current tracking payload data with the new data the callback provides. If you don't want to send specific parameters, enter them as nulls in the callback. For example, payload['WT.cg_n'] = null;.
• None of the parameters the plugin creates are propagated into other hits.
• The defer flag in the return will cause the event to be stored in a cookie, and sent on the next page load, this option is for events that perform page moves where the browser cancels the tracking call. The offsite and download event handlers will automatically defer sending the event if the URL takes the visitor to a new domain. A wt.deferredpayload=1 parameter is added to all deferred hits so you can easily identify them.
• The plugin binds to objects in a manner similar to jQuery, so it will dynamically bind to objects that are latently inserted onto the DOM.
• Selectors/callbacks can be specified as strings in the config or function in javascript external to the plugin. External configurations can be added using the tagReadyDomEvent and the addTracking method.
• The plugin is compatible with Internet Explorer 9+.

Plugin options

"event_name": {"eventTrigger":"dom_event","selector": "css_selector","eventCallback":"stringified_JavaScript Callback"},

Example tag configuration

{
	"standardEvents": {
	"anchor": false,
	"onsite": false,
	"offsite": true,
	"rightclick": false,
	"download": true,
	"javascript": false,
	"scrollTracking": true
	},
	"eventList": {
		"myClick": {
		"eventTrigger": "mousedown",
		"selector": "DIV.wrapper BUTTON.btn",
		"eventCallback": "var el = e[\"element\"] || e[\"srcElement\"] || {},payload = {};payload[\"WT.ti\"] = \"Button:\" + el.textContent || el.innerText;payload[\"WT.dl\"] = \"99\";return {\"data\": payload};"
		},
		"myClick2": {
		"eventTrigger": "click change",
		"selector": "DIV.wrapper INPUT",
		"eventCallback": "var el = e[\"element\"] || e[\"srcElement\"] || {},payload = {};payload[\"WT.ti\"] = \"INPUT:\" + el.id || el.className;payload[\"WT.dl\"] = \"99\";return {\"data\": payload};"
		}
	},
	"socialTypes": {
		"Facebook": [
		"www.facebook.com"
		],
		"YouTube": [
		"youtube.com"
		],
		"Instagram": [
		"instagram.com"
		],
		"Qzone": [
		"Qzone.qq.com"
		],
		"Weibo": [
		"Weibo.com"
		],
		"Twitter": [
		"Twitter.com"
		],
		"Reddit": [
		"Reddit.com"
		],
		"Pinterest": [
		"Pinterest.com"
		],
		"Ask.fm": [
		"Ask.fm"
		],
		"Tumblr": [
		"Tumblr.com"
		],
		"Flickr": [
		"Flickr.com"
		],
		"Google+": [
		"plus.google.com"
		],
		"LinkedIn": [
		"LinkedIn.com"
		],
		"VK": [
		"VK.com"
		],
		"Odnoklassniki": [
		"Odnoklassniki.ru"
		],
		"Meetup": [
		"Meetup.com"
		]
	},
	"enable": false,
	"trackSocial": true,
	"downloadtypes": ".xls, .doc, .pdf, .txt, .csv, .zip, .docx, .xlsx, .rar, .gzip, .pptx"
}

Plugin configuration options

Standard event tracking

Selectors for commonly used event tracking are pre-built into the plugin. Please see the table below for enabling the commonly used selectors.

Note: Special event type "immediate" causes the callback to be executed immediately.

Social event tracking

The boolean trackSocial controls if off-site social links will have an additional parameter sent to identify them as social link clicks. When set to true and there is a pattern match to a sacral URL wt.soc_action will be added to the payload. The socialTypes setting does a pattern match for the URL that looks to see if the pattern listed is contained within the URL string. If it is, the wt.soc_action parameter is added using the label and ': click'. So if the URL is www.youtube.com/Oracle the wt.soc_action would-be YouTube:click. You can add multiple patterns for each label. For example, "Facebook":["www.facebook.com/Responsys","www.facebook.com/Oracle"].

socialTypes: {                            
	"Facebook": ["www.facebook.com"],
	"YouTube": ["youtube.com"],
	"Instagram": ["instagram.com"],
	"Qzone": ["Qzone.qq.com"],
	"Weibo": ["Weibo.com"],
	"Twitter": ["Twitter.com"],
	"Reddit": ["Reddit.com"],
	"Pinterest": ["Pinterest.com"],
	"Ask.fm": ["Ask.fm"],
	"Tumblr": ["Tumblr.com"],
	"Flickr": ["Flickr.com"],
	"Google+": ["plus.google.com"],
	"LinkedIn": ["LinkedIn.com"],
	"VK": ["VK.com"],
	"Odnoklassniki": ["Odnoklassniki.ru"],
	"Meetup": ["Meetup.com"]
}

Custom event tracking

The plugin is designed to accept standard CSS style selectors that can be bound onto the following events:

• eventTrigger

• selector

• eventCallback

• finish

• callback return structure

Custom selectors are created using the following format:

 // simple - on change selector for form tracking
myInput = {
		eventTrigger: 'change',
		selector: "FORM INPUT",
		eventCallback: "var el = e[\'element\'] || e[\'srcElement\'] || {},payload = {};payload[\'WT.ti\'] = \"INPUT Change:\" + el.id || el.className;payload[\'WT.dl\'] = \'98\';return {'\data\': payload};"
}

eventTrigger

The event trigger defined the DOM events that the selector will be bound to. Multiple events can be specified and separated by a space. If a null event trigger is provided the callback will be executed immediately, assuming the browser supports the event.

eventTrigger: 'change focus'

selector

Standard CSS selectors can be used to select what dom elements to bind the tracking to in a method similar to jquery or Sizzle.

selector: 'FORM INPUT, DIV.myClass>BUTTON#btnSubmit:not([class="btnRed"]'

Basic CSS selectors

Refer to the following link for basic CSS Selectors - https://htmlcheatsheet.com/css/.

eventCallback

The selector calls this callback with the node that generated the event as an argument. The return data is merged with the current tracking data and sent to the tag endpoint. If a false is returned then no tracking call will be generated essentially filtering the hit from being sent. If the callback is configured in the tag UI it must be formatted as a string. If it's being inserted after the plugin loads it can be formatted as a function.

Formatted as a function

eventCallback: function (e) {
	var el = e['element'] || e['srcElement'] || {},
	payload = {};
	if (!el.id && !el.className) {return false};
	payload['WT.ti'] = "INPUT Change:" + el.id || el.className;
	payload['WT.dl'] = "98";
	return {'data': payload};
}

Formatted as a string

eventCallback: "var el = e[\'element\'] || e[\'srcElement\'] || {},payload = {};payload[\'WT.ti\'] = \"INPUT Change:\" + el.id || el.className;payload[\'WT.dl\'] = \'98\';return {\'data\': payload};"

finish

This callback is called after the tracking data has been sent. If the eventCallback returns a false, then the finish callback is not executed. The finish callback is provided the event node that generate the event as an argument. If the callback is configured in the tag UI it must be formatted as a string.

Formatted as a function

// move to another page after the tracking call has been sent
finish: function (e) {
	var el = e['element'] || e['srcElement'] || {};
	if (el.href) {window.location = el.href}
}

Formatted as a string

finish: "var el = e[\'element\'] || e[\'srcElement\'] || {};if (el.href) {window.location = el.href};"

callback return structure

return {defer: false, 'data': {'wt.ti':"Test Page','wt.dl':99,'wt.ev':'click};

defer is optional The parameters you want to send should be in the data object as an object

Standard event tracking details

Download links

Download links are hyperlinks whose URL is a download file (URL file name extension matches one of the types in the file types field)

If enabled, an event handler function is added for all links that are downloaded, where a download is defined by the extension type in the downloadtypes. The downloadtypes option is a comma-separated list of file extensions and has a default value of: xls,doc,pdf,txt,csv,zip,docx,xlsx,rar,gzip.

Defining downloadtypes

"evtTrack": {
	downloadtypes: "xls,doc,pdf,txt,csv,zip,docx,xlsx,rar,gzip,xlxs,docx",
}

Example

The page contains the following hyperlink:

<a href="smartsource.xls?lang=en">SmartSource Spreadsheet</a>

Off-site links

Off-site links are hyperlinks whose URL resolves to an off-site domain.

If enabled, an event handler function is added for all links that have href values for off-site domains. Note that by default, query parameters are removed from the off-site link to reduce the number of unique URLs.

Defining off-site links

Suppose the on-site domain field contains: onsitedoms:"localhost,Oracle.corp"

The page contains the following hyperlink: <a href="http://wikipedia.org/wiki/Web_analytics">Wikipedia</a>

Clicking the link generates the following parameters:

Anchor links

Anchor links are hyperlinks whose URL contains: An anchor (URL followed by hash mark "#" followed by fragment identifier) or a hostname from the onsitedoms array.

If enabled, an event handler function is added for all links that are Anchors. The onsitedoms array is a comma-separated list of file domain names or a regular expression, which is used to determine if a link is "on domain".

Example

Suppose the onsite domain field contains: "localhost,Oracle.corp"

The page contains the following named link: <a name=TopOfPage>Top of Page</a>

The page contains the following hyperlink: <a href="#TopOfPage">Go to top</a>

Clicking the link generates the following parameters:

JavaScript links

JavaScript links are hyperlinks whose URL contains the following protocol (scheme): "javascript:".

If enabled, an event handler function is added for all links that have the JavaScript protocol.

Using JavaScript links: <a href="javascript:alert('Good Morning')">Alert Greeting</a>

Clicking the link generates the following parameters:

Right-click to download links

Right-clicked download links are hyperlinks whose URL is a download file where the URL file name extension matches one of the types in the file types field.

If enabled, an event handler function is added for all links that are downloaded, where a download is defined by the extension type in the downloadtypes array. The downloadtypes array is a comma-separated list of file extensions and has a default value of xls, doc, pdf, txt, csv, zip,docx, xlsx, rar, gzip.

Suppose the right-click download file types field contains: .xls

And the page contains the following hyperlink: <a href="smartsource.xls">SmartSource Spreadsheet</a>

Right-clicking would result in the following multi-track parameters:

Viewport scroll depth tracking

Track the depth of the scrolling on the page. The plugin sends data when the scroll bar reached pre-defined quartiles. Each quartile is sent only once per page. For short pages where the user may scroll from 0 - 100% in one movement, the plugin will send the previous quartiles if they have not been sent so the report is more understandable for business users.

The quartile is calculated with: quartile = Number(((viewport bottom position) / windowHeight * 4)).toFixed(0);

CSS Cheat Sheet

Refer to the following link for basic CSS Selectors - https://htmlcheatsheet.com/css/.

addTrack method

The addTrack method is a public method to add tracking selectors into the plugin after it has loaded. This allows you to add the callbacks as functions, which makes debugging much simpler than using strings.

var domEventReady = function () {
	var event =  {
		eventTrigger: 'click',
		selector: "BUTTON.btn2",
		eventCallback: function (e) {
		var el = e['element'] || e['srcElement'] || e['target'] || {},
			payload = {};
			payload['WT.ti'] = "Button:" + el.textContent || el.innerText;
			payload['WT.dl'] = "99";
			return {'data': payload};
		}
	}
	ORA.analytics.plugins.evtTrack.addTracking(event,"test tracker");
};
document.body.addEventListener('ORA_ANALYTICS_READY', domEventReady, false);				
		

Note: This addTrack method is used as part of your Oracle CX Tag implementation. It allows you to add an additional tracking on your website.

Limitations

If there is a preventDefault on the element, tracking will not be triggered

Dependencies

None

Learn more

Infinity Module Plugins