Options for Event Name Values
Once you have selected the elements you want to track (see HTML element selection options), you can give them desired event names. This document provides all the options you can use to customize your event names.
Specify your own values for event category, event action, event label and event value
To specify your own values for event category, event action, event label and event value, you can create event names in your SkyGlue portal using the following format:
myEventCategory||myEventAction||myEventLabel~~myEventValue
myEventAction, myEventLabel and myEventValue are optional. If myEventAction is not specified, SkyGlue will set eventAction using the SkyGlue default format, which includes eventName, userId, and eventTimeStamp. If myEventLabel is not specified, SkyGlue will set eventLabel to the SkyGlue default value, which is the userId, e.g. SgId::sga or SgId::ABCDEF.
Dynamic event name setup using SkyGlue macros
If you want to dynamically generate event names based on web page content, javaScript variables, cookie values and more, you can use one or more of the macros listed here:
1. HTML attribute value of the HTML element
You can set event name to any attribute value of the HTML element user clicked, e.g. title. When you configure an event name in SkyGlue, you can set the event name as {#attributeName}. For example {#title} indicates using the title attribute value of the HTML element as the event name. You can set the title attribute dynamically in your backend code.
You can add additional attribute in your HTML code if you desire. The detail is here.
2. SkyGlue predefined attribute values
(1) {#text}: Text content of the HTML element
The {#text} macro can get the text content of the element.
(2) {#tagname}: Tag name of the HTML element
The {#tagname} macro can get the tag name of an HTML element, e.g. A, img, DIV, etc.
(3) {#sgautoname}: SkyGlue auto-generated event name of the HTML element
The {#sgautoname} macro can get SkyGlue automatically generated event name of an element. See details on SkyGlue automatically generated event names.
(4) {#tagtype}: SkyGlue auto-generated element type of the HTML element
The {#tagtype} macro can get SkyGlue automatically generated element type of an element, e.g. Link, Form, img, etc.
3. JavaScript variables, including GTM DataLayer variable
You can use the jv (JavaScript Variable) macro to get the JavaScript value on a page, for example {#jv:myvarName}.
Here are some example JavaScript variable:
- web page full URL: {#jv:window.location.href}
- web page host name: {#jv:window.location.hostname}
- web page path only: {#jv:window.location.pathname}
Since the dataLayer of Google Tag manager is just a global JavaScript variable, you can use this JavaScript variable macro to get the dataLayer values.
For example, assume you set the dataLayer as following:
You can get the authorName using the following macro: {#jv:dataLayer[0].authorName}
4. Cookie values
You can use the ck (Cookie) macro to get the cookie value of any first party cookie, for example {#ck:myCookieName}.
5. Document-based CSS selector
You can use global CSS selector dc (document-based CSS) to get any text or attribute value on your web page. For example: {#dc:text|a.openpopup}
The HTML attribute or text content is specified before the vertical bar, the CSS selector is specified after the vertical bar. If there are multiple HTML elements matched in the CSS selection, the first HTML element is used. So, please make the CSS selector to select an unique HTML element.
6. Element-based CSS selector
You can use element-based CSS selector dc (element-based CSS) to get any text or attribute value of the parent element or child element of the HTML element clicked.
By default, the selector is based on the current HTML element that is clicked. For example, {#ec:alt|img} will select the “img” element under the current element and then get the “alt” attribute of that element.
To make the CSS selector based on parent element of the current HTML element that is clicked, you can add an additional parent level parameter in the selector.
For example: {#ec:text|2|p:nth-child(1)} will go up 2 levels of the current HTML element, then select the the first “p” element and get the text content of that element.
If you want to select element attribute of the parent element and not go down to a child element, you can leave the 3rd part of the selector (child element selector) empty, but still keep the second vertical bar. For example:{#ec:name|2|} will get the 2nd-level-up parent element’s name attribute.
7. Customized JavaScript function
The function macro fn (function) enables you to use your own JavaScript function to specify the value you want to set in the event name. Your function needs to be globally accessible and return a string value.
For example, {#fn:testFn} will invoke the testFn function and set the event name with it’s return value.
function testFn(){
return this.tagName;
}
In the function, this is the element clicked. You can also pass the element clicked as the first element of the function to make it explicit.
function testFn(element){
return element.tagName;
}
If you function is in a module, you can invoke it using the dot-based reference to the function, for example: {#fn:MODULE.testFn}.
8. Embed multiple macros in an event name
An event name can have more than 1 macro, e.g. menuLink||{#text}||{#href}_{#fn:testFn}.
Disable event tracking on HTML elements using #noEvent#
Adding “#noEvent#” (no quote marks) as part of the event name will disable event tracking on selected HTML elements. You can use this macro to exclude certain HTML elements when automatic event tracking is enabled. You can also use it to temporarily disable certain event tracking setups without removing the setup configuration.
Tracking form data values
You can use SkyGlue to track form data in events with the following two approaches. It is recommend to use the first {{3219a3b63c53d005d3cca3cd86f6c5ddabb5eb17d9c978e18728be2631d9f4b6}DataEntry} approach if you want to analyze individual fields. The second approach concatenates all data in a form together in a JSON fomat. It is helpful if you export the data out and analyze the data with software.
1. Get data for individual fields immediately after user data entry
You can use the {%DataEntry} macro to track form data entries. It can be set to event category, event action or event label. The event is fired when the user enters the value and lose focus on the form field.
Here is an example to track postal code entries: Form_Data||PostalCode||{%DataEntry}. As mentioned above, they follow the order of Event Category||Event Action||Event Label. You can enter the whole string as the event name for the form data collection event. The real postal code value will be stored under Event Label in this example.
2. Get all form data in one event when a form is submitted
You can append “::nonPII” to the end of an event name for a form element to indicate that you want to track the value of the field on the form submission, e.g. “Search::nonPII“. More details here.
If multiple elements are marked in a form, the values of the fields will be sent to GA together in 1 event when the form is submitted. The form data are submitted using JSON format.
We send 1 event for all fields instead of 1 event for each field since we need to minimize the time delay for sending events to GA after form submission.