Unlock the power of zero- and first-party data by including 1:1 personalized elements in your messages. Insert Smart Tags such as country name, language, current month, or first name right from Editor into any message and watch your campaigns turn into a truly personal experience for each visitor.
In this article, you'll learn about:
- What Smart Tags are
- Must try Tactics with Smart Tags
- What type of Visitor Attributes can be used for Smart Tags
- An example of a campaign using Smart tags
- How to set up and use Custom Visitor Attributes as Smart tags
- How to set up and use Dynamic Country Flags?
- Things to keep in mind when using Smart Tags
1. What are Smart Tags?
With Smart Tags, you can create 1:1 personalized messages that make your visitors feel like your offers are talking to them directly by personalizing parts of a message.
Imagine if you could thank every person that visited your e-commerce site by name, include the dollar amount in their cart in your message or mention the country they’re from … all without lifting a finger. Well, that’s exactly what Smart tags can do. Smart Tags let you alter the text automatically in Popups or Embedded Content based on different visitor attributes. This way, you don’t have to create different campaigns for all the different groups in your audience. Smart Tags give you the power to display fully-personalized messages: address customers by their name or display the total value of their current cart content on autopilot.
2. Must try Tactics with Smart Tags
👉 Personalize your shipping bars based on location
👉Dynamically personalize your welcome popups with country
👉Create seasonal offers & boost conversions on autopilot
👉Promote a free shipping threshold based on cart value
👉Encourage product discovery by promoting your top products on autopilot
👉Collect 5-star reviews more effectively in a compliant way
3. What type of Visitor Attributes can be used for Smart Tags?
Smart Tags can be built upon various data from simple ones to complex ones. OptiMonk gathers the data used for Smart tags through a JavaScript code that is inserted on your site, so you can connect with visitors on a deeply personal level.
In short, data for Smart Tags can be acquired from different sources, including:
- Zero-Party Visitor Attributes: collection through OptiMonk campaigns via input fields in campaigns
- First-Party Visitor Attributes: automatic collection by OptiMonk
- Custom Visitor Attributes: a custom source, like your own database (in which case we refer to it as a Custom Attribute)
Zero-Party Visitor Attributes
Zero-Party Visitor Attributes refer to data that your visitors provide to you directly. For instance, if you ask them about their first name, last name or e-mail address in a sign-up form, those pieces of data are considered Zero-Party Visitor Attributes. You can ask your visitors to provide any piece of information you might be interested in and want to use later as Smart Tags or as targeting rules. To collect Zero-Party Visitor Attributes, you can use OptiMonk's built-in Form Elements in Editor:
- Input Fields,
- Radio Buttons,
- Checkboxes,
- Dropdowns,
- Feedback Elements,
- Textarea,
- Survey Elements.
Learn more about Input Fields here.
Learn more about how to use this data in targeting using the Engaged with OptiMonk rule.
First-Party Visitor Attributes
First-Party Data is collected automatically by OptiMonk. It can be used for example to display the name of the country your visitor is coming from. OptiMonk collects the following first-party data you can choose from:
- Static Visitor Attributes (visitors receive upon their first visit): Landing page, First visit date, UTM source, UTM medium, UTM campaign, UTM content
- Dynamic Visitor Attributes (change based on visitor behavior): Current month, Browser language, Browser name, Browser version, Operating system name, Operation system version, Timezone offset (timezone, for example: "UTC-2"), Country name, Visitor popup last seen, Cart total, Cart number of items, Cart number of kinds, Product name, Product category, Cart value countdown
❗Cart and product-related Smart Tags:
- If you have a Shopify, WordPress, WooCommerce, Magento, or Shoprenter site, OptiMonk can automatically detect the content of the visitor’s cart and the products of your website, and use this information for Smart Tags once the OptiMonk application is installed.
- If you have a different website from Shopify, WordPress, WooCommerce, Magento, or Shoprenter, you will need to:
- add a custom JS code detailed in the following article to be able to use cart-related Smart Tags: JavaScript code for Cart Rules
- define the custom attributes you want to use with product-related Smart tags and their value within a Java Script code, and then insert the code on your site to be able to use product-related Smart Tags: Custom Attributes
💡 The Cart Value Countdown is best used with Cart rules, where you target the cart value between a minimum amount (not to show the countdown to everyone, just for those who have something in the cart.)
Custom Visitor Attributes
Please refer to the following article for information on how to configure OptiMonk to gather data from the custom attributes you want to use with Smart tags:
4. An example of a campaign using Smart tags
Let’s look at an example of how to customize a popup with Smart Tags including using the optional entry for the default value. One of the best uses of Smart Tags is to address your visitors by name.
You’d like to address all your visitors by their first name, but you might not have this data for all visitors. The solution is to use the default value to create a campaign that displays the text 'Dear Visitor' for non-registered users and displays their first name if they are registered.
1. Log in to your OptiMonk account at https://app.optimonk.com/
2. Select Campaigns on the navbar.
3. Select the Campaign you wish to edit or create a new one.
4. Click on the Variant you want to edit. This will take you to the Campaign editor.
5. If you click on any text element, you will be able to choose a Smart Tag from the drop-down menu.
6. Select the First name and add a default value in case you might not have this data for all visitors, then click on Save.
7. Click on Save or Save & Exit to save the changes you made in the Campaign Editor.
The below screenshot shows what this looks like in the Campaign editor in your OptiMonk dashboard:
When the visitor is a registered user and their first name is available, the popup will look like this:
When the visitor is not registered or logged in, the system will display the default value we provided:
5. How to set up and use Custom Visitor Attributes as Smart tags?
OptiMonk gathers the data used for Smart tags through a JavaScript code that is inserted on your site. You define the custom attributesyou want to use with Smart tags and their value within this code, and then insert the code on your site.
After defining the custom attributes or cart content data in the JavaScript code, you have to put placeholders in the text of your popup. The placeholders you use must follow a specific format to enable the system to recognize them, and replace them with the values of your custom attributes:
[[type:variable|default value]]
The system will interpret the information between the double square brackets, ‘[[‘ and ‘]]’.
First, the type must be defined. This can either be cart or attribute, depending on whether you would like to use cart data or a custom attribute, respectively.
Following the type is a colon, ‘:’, and the name of the variable. The name of the variable must match the one you set in the JavaScript code. It can't contain any special characters, and it’s case-sensitive, meaning uppercase and lowercase letters are interpreted as different characters.
The last part is optional: Following the type is a vertical bar ‘|’ and the text you would like to use as a default value. This default value will be displayed in the event the custom attribute is not set and doesn't return a value to the system.
❗ Placeholders can't contain any typos. If your placeholder can't be interpreted by the system, the entire placeholder will show up on the popup.
❗ The custom attribute name must match the name you set up in JavaScript exactly.
6. How to set up and use Dynamic Country Flags?
1. Put the below code to the CSS Editor
.om-overlay:not(#editor-mode) img[src*="data:"] {
opacity: 0;
}
/* emoji css for windows */
@font-face {
font-family: 'Twemoji Country Flags';
src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
#editor-mode .om-dtr-content em,
.win .om-dtr-content em {
font-family: "Twemoji Country Flags", sans-serif !important;
font-style: normal;
}
2. Put the below code to the JS Editor under Page Load
const countries = {
Andorra: 'AD',
'United Arab Emirates': 'AE',
Afghanistan: 'AF',
'Antigua and Barbuda': 'AG',
Anguilla: 'AI',
Albania: 'AL',
Armenia: 'AM',
Angola: 'AO',
Antarctica: 'AQ',
Argentina: 'AR',
'American Samoa': 'AS',
Austria: 'AT',
Australia: 'AU',
Aruba: 'AW',
'Åland Islands': 'AX',
Azerbaijan: 'AZ',
'Bosnia and Herzegovina': 'BA',
Barbados: 'BB',
Bangladesh: 'BD',
Belgium: 'BE',
'Burkina Faso': 'BF',
Bulgaria: 'BG',
Bahrain: 'BH',
Burundi: 'BI',
Benin: 'BJ',
'Saint Barthélemy': 'BL',
Bermuda: 'BM',
Brunei: 'BN',
Bolivia: 'BO',
'Caribbean Netherlands': 'BQ',
Brazil: 'BR',
Bahamas: 'BS',
Bhutan: 'BT',
Botswana: 'BW',
Belarus: 'BY',
Belize: 'BZ',
Canada: 'CA',
'Cocos [Keeling] Islands': 'CC',
'Congo - Kinshasa': 'CD',
'Central African Republic': 'CF',
'Congo - Brazzaville': 'CG',
Switzerland: 'CH',
"Côte d'Ivoire": 'CI',
'Cook Islands': 'CK',
Chile: 'CL',
Cameroon: 'CM',
China: 'CN',
Colombia: 'CO',
'Costa Rica': 'CR',
Cuba: 'CU',
'Cape Verde': 'CV',
Curaçao: 'CW',
'Christmas Island': 'CX',
Cyprus: 'CY',
'Czech Republic': 'CZ',
Germany: 'DE',
Djibouti: 'DJ',
Denmark: 'DK',
Dominica: 'DM',
'Dominican Republic': 'DO',
Algeria: 'DZ',
Ecuador: 'EC',
Estonia: 'EE',
Egypt: 'EG',
Eritrea: 'ER',
Spain: 'ES',
Ethiopia: 'ET',
Finland: 'FI',
Fiji: 'FJ',
'Falkland Islands': 'FK',
Micronesia: 'FM',
'Faroe Islands': 'FO',
France: 'FR',
Gabon: 'GA',
'United Kingdom': 'GB',
Grenada: 'GD',
Georgia: 'GE',
'French Guiana': 'GF',
Guernsey: 'GG',
Ghana: 'GH',
Gibraltar: 'GI',
Greenland: 'GL',
Gambia: 'GM',
Guinea: 'GN',
Guadeloupe: 'GP',
'Equatorial Guinea': 'GQ',
Greece: 'GR',
'South Georgia and the South Sandwich Islands': 'GS',
Guatemala: 'GT',
Guam: 'GU',
'Guinea-Bissau': 'GW',
Guyana: 'GY',
'Hong Kong SAR China': 'HK',
Honduras: 'HN',
Croatia: 'HR',
Haiti: 'HT',
Hungary: 'HU',
Indonesia: 'ID',
Ireland: 'IE',
Israel: 'IL',
'Isle of Man': 'IM',
India: 'IN',
'British Indian Ocean Territory': 'IO',
Iraq: 'IQ',
Iran: 'IR',
Iceland: 'IS',
Italy: 'IT',
Jersey: 'JE',
Jamaica: 'JM',
Jordan: 'JO',
Japan: 'JP',
Kenya: 'KE',
Kyrgyzstan: 'KG',
Cambodia: 'KH',
Kiribati: 'KI',
Comoros: 'KM',
'Saint Kitts and Nevis': 'KN',
'North Korea': 'KP',
'South Korea': 'KR',
Kuwait: 'KW',
'Cayman Islands': 'KY',
Kazakhstan: 'KZ',
Laos: 'LA',
Lebanon: 'LB',
'Saint Lucia': 'LC',
Liechtenstein: 'LI',
'Sri Lanka': 'LK',
Liberia: 'LR',
Lesotho: 'LS',
Lithuania: 'LT',
Luxembourg: 'LU',
Latvia: 'LV',
Libya: 'LY',
Morocco: 'MA',
Monaco: 'MC',
Moldova: 'MD',
Montenegro: 'ME',
'Saint Martin': 'MF',
Madagascar: 'MG',
'Marshall Islands': 'MH',
Macedonia: 'MK',
Mali: 'ML',
'Myanmar [Burma]': 'MM',
Mongolia: 'MN',
'Macau SAR China': 'MO',
'Northern Mariana Islands': 'MP',
Martinique: 'MQ',
Mauritania: 'MR',
Montserrat: 'MS',
Malta: 'MT',
Mauritius: 'MU',
Maldives: 'MV',
Malawi: 'MW',
Mexico: 'MX',
Malaysia: 'MY',
Mozambique: 'MZ',
Namibia: 'NA',
'New Caledonia': 'NC',
Niger: 'NE',
'Norfolk Island': 'NF',
Nigeria: 'NG',
Nicaragua: 'NI',
Netherlands: 'NL',
Norway: 'NO',
Nepal: 'NP',
Nauru: 'NR',
Niue: 'NU',
'New Zealand': 'NZ',
Oman: 'OM',
Panama: 'PA',
Peru: 'PE',
'French Polynesia': 'PF',
'Papua New Guinea': 'PG',
Philippines: 'PH',
Pakistan: 'PK',
Poland: 'PL',
'Saint Pierre and Miquelon': 'PM',
'Pitcairn Islands': 'PN',
'Puerto Rico': 'PR',
'Palestinian Territories': 'PS',
Portugal: 'PT',
Palau: 'PW',
Paraguay: 'PY',
Qatar: 'QA',
Réunion: 'RE',
Romania: 'RO',
Serbia: 'RS',
Russia: 'RU',
Rwanda: 'RW',
'Saudi Arabia': 'SA',
'Solomon Islands': 'SB',
Seychelles: 'SC',
Sudan: 'SD',
Sweden: 'SE',
Singapore: 'SG',
'Saint Helena': 'SH',
Slovenia: 'SI',
'Svalbard and Jan Mayen': 'SJ',
Slovakia: 'SK',
'Sierra Leone': 'SL',
'San Marino': 'SM',
Senegal: 'SN',
Somalia: 'SO',
Suriname: 'SR',
'South Sudan': 'SS',
'São Tomé and Príncipe': 'ST',
'El Salvador': 'SV',
'Sint Maarten': 'SX',
Syria: 'SY',
Swaziland: 'SZ',
'Turks and Caicos Islands': 'TC',
Chad: 'TD',
'French Southern Territories': 'TF',
Togo: 'TG',
Thailand: 'TH',
Tajikistan: 'TJ',
Tokelau: 'TK',
'Timor-Leste': 'TL',
Turkmenistan: 'TM',
Tunisia: 'TN',
Tonga: 'TO',
Turkey: 'TR',
'Trinidad and Tobago': 'TT',
Tuvalu: 'TV',
Taiwan: 'TW',
Tanzania: 'TZ',
Ukraine: 'UA',
Uganda: 'UG',
'U.S. Minor Outlying Islands': 'UM',
'United States': 'US',
Uruguay: 'UY',
Uzbekistan: 'UZ',
'Vatican City': 'VA',
'Saint Vincent and the Grenadines': 'VC',
Venezuela: 'VE',
'British Virgin Islands': 'VG',
'U.S. Virgin Islands': 'VI',
Vietnam: 'VN',
Vanuatu: 'VU',
'Wallis and Futuna': 'WF',
Samoa: 'WS',
Kosovo: 'XK',
Yemen: 'YE',
Mayotte: 'YT',
'South Africa': 'ZA',
Zambia: 'ZM',
Zimbabwe: 'ZW',
};
var adapter = OptiMonk.Visitor.createAdapter();
const countryEn = adapter.attr('_country_en');
const code = countries[countryEn] || null;
adapter.attr('country_code_variable', code);
if (code === null) {
adapter.removeAttr('country_code_variable');
}
// if we want flag image
// const countryCodeLowerCase = code?.toLowerCase();
// let omImageTag = document.querySelector('img.om-image');
// let omImageSource = document.querySelector('.om-image source');
// if (code !== null) {
// let replacedFlag =
// 'https://flagicons.lipis.dev/flags/4x3/${countryCodeLowerCase}.svg';
// omImageSource.setAttribute('srcset', replacedFlag);
// omImageTag.setAttribute('src', replacedFlag);
// }
function getFlagEmoji(countryCode) {
if (countryCode !== null) {
const codePoints = countryCode
?.split('')
.map((char) => 127397 + char.charCodeAt());
return String.fromCodePoint(...codePoints);
}
}
const emojiFlag = getFlagEmoji(code);
adapter.attr('emoji_flag', emojiFlag);
/* if on windows */
if (/windows/i.test(navigator.userAgent)) {
document.querySelector('.om-overlay').classList.add('win');
}
3. Use Smart Tag
Use the following smart tag in your campaign: [[attribute:emoji_flag]]
It is important that the EMOJI FLAG has italic formatting!
7. Things to keep in mind when using Smart Tags
❗ You must pay attention that there is no typo in the used characters. In case you have any typos, the used text will show up instead of the text replacement.
❗ The name of the variable must match the name used in your JavaScript code. It cannot contain any special characters, and it also differentiates between upper-case and lower-case letters.
✉️ If you need any further help or have any questions, please let us know at support@optimonk.com, and we would be happy to assist you :)
Comments