Dynamic Data in Triggers

The Responses support use of dynamic data allowing the use of information stored in page JavaScript variables, page elements or events that triggered a response. For example, you can show a message using the user’s name stored in your data layer:

Hello {{window.dataLayer.firstName}}, it's good to see you again!

which would resolve to:

Hello Jane, it's good to see you again!

Syntax

Based on Mustache

The syntax is based on Mustache Logic-less templates. Learn more about Mustache from the official website:

https://mustache.github.io/mustache.5.html

Checking if a value exists

If a variable specified in a template is empty it resolves to an empty string:

Hello {{window.dataLayer.firstName}}, it's good to see you again!

This may result in corrupted messages – in this case an extra space after “Hello”:

Hello , it's good to see you again!

To avoid such situations you can check if a variable exists and show the space only if it does:

Hello{{#window.dataLayer.firstName}} {{window.dataLayer.firstName}{{/window.dataLayer.firstName}}, it's good to see you again!

You can also check if a variable does not exist and build more complex scenarios:

{{^window.dataLayer.firstName}}Hello Stranger!{{/window.dataLayer.firstName}}
{{#window.dataLayer.firstName}}Hello {{window.dataLayer.firstName}, it's good to see you again!{{/window.dataLayer.firstName}}

which would resolve to “Hello Stranger!” if window.dataLayer.firstName was missing and to “Hello Jane, it’s good to see you again!” if firstName was defined.

Accessing Data

Window

You can access any global object by referencing it with “window”, for example:

{{window.dataLayer.firstName}}

Page Elements

You can use the content of elements present on a page by providing their CSS or UseItBetter selector. For example, you could access the text content (“My Website”) of the following element:

<a id="myLink" href="http://mywebsite.com" title="Link to my website"><strong>My Website</strong></a>

using:

{{#element.innerText}}#myLink{{/element.innerText}}"

Supported element properties include:

• element.innerText (alias: ‘element.textContent’)
• element.value (for form fields)
• element.label (for form fields)
• element.href (for links)

To access any attribute of an element, you can pass the name of an attribute after an element’s selector separated with a pipe (“|”). The following example:

{{#element.attr}}#myLink|title{{/element.attr}}"

would return “Link to my website”.

The ‘href’ property is searched in the parent’s hierarchy if it is not found in the specified element itself. Therefore, “http://mywebsite.com” would be returned even if a selector returns a child element of a link (anchor tag):

{{#element.href}}#myLink strong{{/element.innerText}}

Triggering Event

{{triggeringEvent}} provides access to a data point that triggered a response. If triggering rules consist of multiple data points, access only to the last data point is provided.

{{triggeringEvent}} contains two properties:

{{triggeringEvent.key}}
{{triggeringEvent.val}}

If a triggering event is an Interactive Event (Type E):

button[1]#register.mouseover

The “key” property returns a selector of an element that the user interacted with (“button[1]#register”) and “val” returns the type of interaction (“mouseover”).

If a triggering event is a Meta Event (Type E) or an Attribute (Type A):

Basket Value=89

The “key” property returns the datapoint’s key (“Basket Value”) and “val” returns its value (“100″).

For example, you could use that information in a Code Eval response to encourage users to reach the basket value of $100 and get free shipping:

var freeShippingAtBasketValue = 100;
var currentBasketValue = {{triggeringEvent.val}}*1
var missingBasketValue = freeShippingAtBasketValue - currentBasketValue;
if (missingBasketValue > 0){
  alert ("Add $"+missingBasketValue+" more to your basket and get free shipping!");
}else{
  alert ("You are eligible for free shipping!");
}