Dynamic content in personalization option

Dynamic content

Inside each personalization option, you can add both static and dynamic content. If you want to respond to user data and modify the content according to certain rules, you can use JavaScript code within the personalization template.

Usage

Inside the Content field, you can embed JavaScript code using double curly braces:

You can use all the functions of the standard JavaScript library and standard classes. Learn more (opens new window).

Example 1

The sum of 2 + 2 = {{return 2+2}}

Expected result:

The sum of 2 + 2 = 4

Example 2

For simple calculations where no conditions are required, the return command can be omitted

The sum of 2 + 2 = {{2+2}}

Expected result:

The sum of 2 + 2 = 4

Example 3

JavaScript conditional operators such as if/else are supported

Is 10 greater than 2? - {{
				   if(10>2){
				     return "Yes";
				   } else {
				     return "No";
				   }
				}}

Оexpected result:

Is 10 greater than 2? - yes

Example 4

For more complex calculations and rules, internal functions are supported, for example:

The sum of 99 and 1 equals {{
				 function sum(arg1, arg2) {  
					 return arg1 + arg2;  
				 }  
				 return sum(99,1);
				}}

If you use nested functions, remember to explicitly return the result with return

Expected result:

The sum of 99 and 1 equals - 100

Example 5

Any number of different JS scripts can be used within the content

{{5 + 5}} greater than {{4 - 2}}? - {{return "Yes";}}

expected result:

10 greater than 2? - Yes

However, be cautious as excessive scripting can impact content computation speed

Context

Within the JS code, you have the ability to access the current context through the data variable

Example 1

You are in{{data.geo.city.nativeName}}

Expected result:

You are in Moscow

Example 2

Conditional operators can also be used to better respond to content

{{ 
  let cityName = data.geo.city.nativeName;
  let population = data.geo.city.population;
  let cityInfo = "You are in the city of " + cityName + ", which has a population of " + population + " people.";
  if (data.geo.city.isRegionCapital) {
    cityInfo += " This city is the capital of the region.";
  }
  if (data.geo.city.isCountryCapital) {
    cityInfo += " This city is the capital of the country.";
  }
  return cityInfo;
}}

Expected result:

You are in the city of Berlin, which has a population of 3878100. This city is the capital of the country.

Example 3: Greeting based on time of day

{{ 
  let hour = new Date().getHours();
  let greeting;
  if (hour < 12) {
    greeting = "Good morning";
  } else if (hour < 18) {
    greeting = "Good evening";
  } else {
    greeting = "Good evening";
  }
  return greeting;
}}

expected result:

Good morning

Example 4: Displaying weather with emojis

{{ 
  let temperature = data.weather.temp;
  let weatherEmoji;
  if (temperature < 10) {
    weatherEmoji = "❄️";
  } else if (temperature >= 10 && temperature < 25) {
    weatherEmoji = "☀️";
  } else {
    weatherEmoji = "🌞";
  }
  return "Today is " + weatherEmoji + " temperature " + temperature + "°C";
}}

Expected result:

Today ☀️ the temperature is 28°C

Parameters

Parameter	What it contains	Type	Example Values	Notes
data.geo.city.nativeName	City name in the native language	string	"Москва", "Paris"	Used for content localization.
data.geo.city.englishName	City name in English	string	"Moscow", "Paris"	Used for internationalization.
data.geo.city.russianName	City name in Russian	string	"Москва", "Париж"	Used for Russian-language content.
data.geo.city.isRegionCapital	Flag indicating if the city is the capital of the region	bool	true, false	Useful for determining the city's status.
data.geo.city.isCountryCapital	Flag indicating if the city is the capital of the country	bool	true, false	Useful for determining the city's status.
data.geo.city.population	Population of the city	number	12500000, 2140000	Used for demographic data analysis.
data.geo.region.nativeName	Region name in the native language	string	"Московская область", "Île-de-France"	Used for content localization.
data.geo.region.englishName	Region name in English	string	"Moscow Oblast", "Île-de-France"	Used for internationalization.
data.geo.region.russianName	Region name in Russian	string	"Московская область", "Иль-де-Франс"	Used for Russian-language content.
data.geo.region.population	Population of the region	number	7500000, 12200000	Used for demographic data analysis.
data.geo.country.nativeName	Country name in the native language	string	"Россия", "France"	Used for content localization.
data.geo.country.englishName	Country name in English	string	"Russia", "France"	Used for internationalization.
data.geo.country.russianName	Country name in Russian	string	"Россия", "Франция"	Used for Russian-language content.
data.geo.country.population	Population of the country	number	146000000, 67000000	Used for demographic data analysis.
data.page.schemaOrg.brandName	Brand name for use in structured Schema.org data	string	"Apple", "Nike"	Used for SEO and improving visibility in search engines.
data.page.schemaOrg.offer.price	Offer price for use in structured Schema.org data	number	99.99, 149.95	Used for SEO and improving visibility in search engines.
data.page.schemaOrg.offer.availability	Offer availability for use in structured Schema.org data	string	"InStock", "OutOfStock"	Used for SEO and improving visibility in search engines.
data.page.schemaOrg.aggregateRating.ratingValue	Average rating for use in structured Schema.org data	number	4.5, 3.8	Used for SEO and improving visibility in search engines.
data.page.schemaOrg.aggregateRating.reviewCount	Number of reviews for use in structured Schema.org data	number	120, 450	Used for SEO and improving visibility in search engines.
data.page.pageClearedUrl	Cleaned URL of the page	string	"/about", "/contact"	Used for analysis and routing.
data.page.pageTitle	Page title	string	"Home Page", "About Us", "Contact"	Required for SEO and user convenience.
data.weather.temp	Current temperature	number	22.5, -3.0	Used for displaying current weather.
data.weather.tempFeelsLike	Feels-like temperature	number	20.0, -5.0	Used for displaying feels-like weather.
data.weather.humidity	Air humidity	number	65, 80	Used for displaying current weather.
data.device.browser	User's browser	string	"Other", "Safari", "Edge", "Opera", "InternetExplorer", "YandexBrowser", "Chrome", "Firefox"	Used for traffic analysis and optimization for different browsers.
data.device.deviceType	User's device type	string	"Other", "Smartphone", "Desktop", "Tablet"	Used for traffic analysis and optimization for different devices.
data.device.os	User's operating system	string	"Other", "Linux", "MacOs", "Windows", "iOS", "Android"	Used for traffic analysis and optimization for different OS.
data.utm.campaign	UTM "campaign" tag for tracking ad campaigns	string	"summer_sale", "new_year_promo"	Used for analyzing the effectiveness of ad campaigns.
data.utm.content	UTM "content" tag for tracking ad content	string	"banner_1", "email_newsletter"	Used for analyzing the effectiveness of ad campaigns.
data.utm.medium	UTM "medium" tag for tracking ad channel	string	"cpc", "email"	Used for analyzing the effectiveness of ad campaigns.
data.utm.source	UTM "source" tag for tracking traffic source	string	"google", "facebook"	Used for analyzing the effectiveness of ad campaigns.
data.utm.term	UTM "term" tag for tracking keywords	string	"best_deals", "cheap_phones"	Used for analyzing the effectiveness of ad campaigns.
data.dateAndTime.dayOfWeekNumber	Day of the week number	number	1, 3, 7	Used for analyzing traffic by day of the week.
data.dateAndTime.weeknumberInMonth	Week number in the month	number	2, 4	Used for analyzing traffic by week of the month.
data.dateAndTime.clientLocalHour	User's local time (hour)	number	14, 21	Used for analyzing traffic by time of day.
data.dateAndTime.isNight	Flag indicating if the current time is night	bool	true, false	Used for analyzing traffic by time of day.
data.dateAndTime.isMorning	Flag indicating if the current time is morning	bool	true, false	Used for analyzing traffic by time of day.
data.dateAndTime.isWeekend	Flag indicating if the current day is a weekend	bool	true, false	Used for analyzing traffic by day of the week.
data.session.number	User session number	number	1, 2, 3	Used for analyzing user activity.
data.session.durationSec	Session duration in seconds	number	1200, 1800	Used for analyzing user activity.
data.session.pagesOpenedInThisSession	Number of pages opened in the current session	number	5, 10	Used for analyzing user activity.

Now that you are familiar with the capabilities of dynamic content and using JS code in personalization variants, you can easily modify the content according to rules and user data.