Options for Event Name Values
Once you have selected the element you want to track (see HTML element selection options), you can customize the event name in SkyGlue. This document provides all of the options you can use to customize an event name.
Specify your own values for event category, event action, event label and event value
To specify your own value for event category, event action, event label and event value, you can create an event name 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 the web page content, JavaScript variables, cookie values and more, you can use one or more of the macros listed below:
1. HTML attribute value of the HTML element
You can set an event name to any attribute value of the HTML element a user clicks, 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 attributes in your HTML code if needed. The detail is here.
2. SkyGlue predefined attribute value
(1) {#text}: Text content of the HTML element
The {#text} macro retrieves the text content of the element.
(2) {#tagname}: Tag name of the HTML element
The {#tagname} macro retrieves 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 retrieves the SkyGlue automatically generated event name for an element. See details on SkyGlue automatically generated event names.
(4) {#tagtype}: SkyGlue auto-generated element type of the HTML element
The {#tagtype} macro retrieves the 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 retrieve the JavaScript value on a page, for example {#jv:myvarName}.
Here are some examples of the 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 retrieve the dataLayer values.
For example, assume you set the dataLayer as following:
You can retrieve the authorName using this macro: {#jv:dataLayer[0].authorName}
4. Cookie values
You can use the ck (Cookie) macro to retrieve the cookie value of any first party cookie, for example {#ck:myCookieName}.
5. Document-based CSS selector
You can use the global CSS selector dc (document-based CSS) to retrieve 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 picked. So, please make the CSS selector select an unique HTML element.
6. Element-based CSS selector
You can use the element-based CSS selector dc (element-based CSS) to retrieve any text or attribute value of the parent element or child element of an HTML element.
By default, the selector is based on the current HTML element that is selected. For example, {#ec:alt|img} will select the “img” element under the current element and then retrieve the “alt” attribute of that element.
To make the CSS selector based on the parent element of the current HTML element selected, 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 to retrieve the text content of that element.
If you want to select an 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 one 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, it will disable event tracking on the selected HTML element. You can use this macro to exclude certain HTML element when automatic event tracking is on. You can also use it to temporarily disable certain event tracking setups without removing the setup configuration.
Tracking form data values
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 loses 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.