Once you selected the elements you want to track (see HTML element section 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 values

To specify your own values for  event category, event action, event label and event values, 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 with 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 set any attribute value of the HTML element user clickedh, 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’s 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 want. The detail is here.

2. Text content of the HTML element

To get the text content of an element,  you can use {#text} macro to get the text of the element.

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}.

Following 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 the 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 current element and then get the “alt” attribute of that element.

To make the CSS selector based on paraent 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 level of the current HTML element, then select the the first “p” element and get the text content of that element.

7. Customized JavaScript function

The function macro fn (function) enable you to use your own JavaScript function to specify the value you want to set in the event name. Your function needs to be global accessible and returns 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:

A event name can have more than 1 macros, e.g. menuLink||{#text}||{#href}_{#fn:testFn}.

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 {%DataEntry} approach if you want to analyze individual field. The second approach concatenate 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 is fired when the user enters the value and lose focuses 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 form submission, e.g. “Search::nonPII“.  More details here.

If multiple elements in 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 sent 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.