Dinamikus szövegcsere

Hozd ki a legtöbbet a zero- és first-party adatokból személyre szabott üzenetekkel!
Tegyél kampányaidba 1:1 személyre szabott elemeket, és alakítsd őket valódi élménnyé minden látogató számára. A Kampányszerkesztőben egyszerűen beilleszthetsz Smart Tag-eket – például a látogató keresztnevét, országát, nyelvét vagy az aktuális hónapot –, így az üzeneteid mindenkihez személyesen szólnak majd.

Ebben a cikkben megmutatjuk:

1. Mi jelent a Smart Tag?

A Smart Tag-ek segítségével személyre szabott üzeneteket jeleníthetsz meg – olyanokat, amelyek valóban a látogatónak szólnak. Ezek az „okos címkék” lehetővé teszik, hogy üzeneteid automatikusan igazodjanak a látogató adataihoz.

Untitled.png

Képzeld el, hogy név szerint köszöntheted a látogatót, megjelenítheted az éppen aktuális kosárértékét, vagy azt is, melyik országból böngészi az oldaladat – mindezt külön beavatkozás nélkül.

A Smart Tag-ek automatikusan frissítik az üzenetek tartalmát a látogatók jellemzői alapján, legyen szó popupokról vagy beágyazott űrlapokról. Így nem kell külön kampányokat létrehoznod minden célcsoportra – mégis mindenki személyre szabott élményt kap.
Például: a látogató nevét jeleníted meg, vagy valós időben mutatod, mennyire van még szüksége az ingyenes szállításhoz. Mindezt teljesen automatikusan.

 

2. Milyen bevált taktikákat érdemes kipróbálni

👉 Személyre szabott szállítási sávok – jeleníts meg eltérő üzeneteket a látogató tartózkodási helye alapján.

👉 Üdvözlő popuppok lokalizálása – köszöntsd a látogatót az országának megfelelően.

👉 Szezonális ajánlatok automatizálva – emeld ki az aktuális hónaphoz illő kedvezményeket dinamikusan.

👉 Ingyenes szállítás küszöbének kommunikálása – mutasd meg valós időben, mennyi hiányzik még az ingyenes szállításhoz.

👉 Termékfelfedezés ösztönzése – emeld ki automatikusan a legnépszerűbb termékeidet.

👉 Véleménygyűjtés hatékonyabban – kérj 5 csillagos értékeléseket GDPR-kompatibilis módon.

 

3. Milyen látogatói adatok használhatók fel Smart Tag-ként?

A Smart Tagek különböző típusú látogatói adatokra épülhetnek – az egyszerűtől a komplexig. Az OptiMonk a weboldaladba beágyazott JavaScript-kód segítségével gyűjti ezeket az adatokat, így valóban személyre szabott élményt nyújthatsz minden látogatónak.

Röviden összefoglalva, a Smart Tagek az alábbi forrásokból származó adatokra épülhetnek:

  • Zero-party adatok: az OptiMonk kampányain keresztül, a látogatók által önkéntesen megadott információk (pl. név, e-mail).

  • First-party adatok: az OptiMonk automatikusan gyűjti őket (pl. ország, nyelv, eszköz).

  • Egyedi látogatói adatok (Custom Attributes): külső forrásból, például saját adatbázisból származó, manuálisan beküldött adatok.

Zero-party adatok

A zero-party adatok azok, amelyeket a látogatók közvetlenül megadnak neked – például amikor feliratkozáskor megadják a nevüket vagy e-mail címüket. Ezek az információk később Smart Tagként vagy célzási feltételként is felhasználhatók.

Zero-party adatokat az OptiMonk szerkesztőjében az alábbi űrlapelemekkel gyűjthetsz:

  • Szövegmezők (Input Fields)

  • Választógombok (Radio Buttons)

  • Jelölőnégyzetek (Checkboxes)

  • Legördülő menük (Dropdowns)

  • Véleménykérő elemek (Feedback Elements)

  • Szövegterületek (Textarea)

  • Kérdőíves elemek (Survey Elements)

👉 Tudj meg többet az űrlapelemek használatáról itt.

👉 Így használhatod célzásra a begyűjtött adatokat az "Engaged with OptiMonk" szabállyal.

First-party látogatói adatok

A first-party (saját) adatok az OptiMonk által automatikusan gyűjtött információk, amelyeket közvetlenül a látogatók viselkedéséből vagy böngészőjéből szerez meg a rendszer. Ezekkel például megjelenítheted, hogy melyik országból érkezett a látogató.

Az OptiMonk által elérhető first-party adatok:

Statikus látogatói adatok (a látogató első látogatásakor rögzítve):

  • Belépési oldal (Landing page)

  • Első látogatás dátuma

  • UTM forrás, médium, kampány, tartalom

Dinamikus látogatói adatok (a látogató viselkedésétől függően változnak):

  • Aktuális hónap

  • Böngésző nyelve, neve, verziója

  • Operációs rendszer neve és verziója

  • Időzóna eltolás (pl. „UTC+2”)

  • Ország neve

  • Legutóbb megtekintett popup

  • Kosárérték

  • Kosárban lévő termékek száma

  • Különböző terméktípusok száma

  • Terméknév

  • Termékkategória

  • Kosárérték visszaszámláló

Kosár- és termékalapú Smart Tagek

Ha Shopify, WordPress, WooCommerce, Magento vagy Shoprenter platformon működik a webáruházad, az OptiMonk automatikusan felismeri a látogatók kosarát és a weboldal termékeit, így ezek az adatok Smart Tagként felhasználhatók a kampányokban – külön fejlesztés nélkül.

Ha más platformot használsz, az alábbi lépésekre lesz szükséged:

  1. Kosáradatokhoz:
    ➡️ Add hozzá ezt az egyedi JavaScript kódot:
    👉 Kosáradatok szabályaihoz szükséges JS-kód »

  2. Termékadatokhoz:
    ➡️ Hozd létre saját egyedi attribútumaidat JavaScript segítségével (pl. terméknév, kategória), majd illeszd be a kódot az oldaladba:
    👉 Egyedi attribútumok beállítása »

💡 Tipp: A kosárérték visszaszámláló akkor működik a legjobban, ha célzási szabályként kosárértékre szűrsz – így csak azoknak jelenik meg, akik már vásárlás közelében járnak.

Egyedi látogatói adatok (Custom Attributes)

Ha még specifikusabb adatokkal szeretnél dolgozni, saját adatforrásaidból (pl. CRM, felhasználói adatbázis) is beállíthatsz egyedi látogatói attribútumokat, amelyeket Smart Tagként használhatsz.

👉 Részletes útmutatót itt találsz:
Egyedi attribútumok beállítása OptiMonkban »

4. Példa kampányra Smart Tag-ek használatával

Nézzünk meg egy példát arra, hogyan lehet testreszabni egy popupot Smart Tag-ek segítségével, beleértve az alapértelmezett érték használatának lehetőségét is. A Smart Tag-ek egyik legjobb felhasználási módja, ha a látogatókat a keresztnevükön szólítjuk meg.

Szeretnéd, ha minden látogatót a keresztnevén szólítanál meg, de lehet, hogy ez az adat nem áll rendelkezésedre minden esetben. A megoldás az alapértelmezett érték használata: hozz létre egy olyan kampányt, amely a „Kedves Látogató” szöveget jeleníti meg a nem regisztrált felhasználóknak, míg a regisztráltaknál a keresztnevüket.

  1. Jelentkezz be OptiMonk fiókodba: https://app.optimonk.com

  2. Válaszd ki a Kampányok menüpontot a felső navigációs sávban.

  1. Válaszd ki a szerkeszteni kívánt kampányt, vagy hozz létre egy újat.

  1. Kattints arra a változatra, amelyet szerkeszteni szeretnél. Ezzel megnyílik a Kampányszerkesztő.

Untitled__3_.png

  1. Ha rákattintasz bármely szöveges elemre, a legördülő menüből kiválaszthatod a megfelelő Smart Tag-et.

  1. Válaszd ki a „Keresztnév” Smart Tag-et, és adj meg egy alapértelmezett értéket arra az esetre, ha ez az adat nem állna rendelkezésre minden látogatónál, majd kattints a Mentés gombra.

  1. Kattints a „Mentés” vagy a „Mentés és kilépés” gombra, hogy elmentsd a Kampányszerkesztőben végzett módosításokat.

Az alábbi képernyőkép megmutatja, hogyan néz ki mindez a Kampányszerkesztőben, az OptiMonk kezelőfelületén:

Untitled__6_.png

Ha a látogató regisztrált felhasználó, és rendelkezésre áll a keresztneve, a popup így fog kinézni:

Untitled__7_.png

Ha a látogató nincs regisztrálva vagy nincs bejelentkezve, a rendszer az általunk megadott alapértelmezett értéket fogja megjeleníteni:

Untitled__8_.png

 

5. Hogyan állítsd be és használd az egyéni látogatói attribútumokat Smart tagekként?

Az OptiMonk a Smart tagekhez használt adatokat egy JavaScript kóddal gyűjti, amelyet a weboldaladba kell beilleszteni. Ebben a kódban határozod meg, hogy mely egyéni attribútumokat szeretnéd használni Smart tagként, valamint ezek értékét is.

Miután definiáltad az egyéni attribútumokat vagy a kosár tartalmára vonatkozó adatokat a JavaScript kódban, a popup szövegébe kell elhelyezned az ezekhez tartozó helyettesítő szövegeket (ún. placeholder-eket). Ezeknek a placeholder-eknek meghatározott formátumot kell követniük, hogy a rendszer felismerje őket, és automatikusan lecserélje azokat az egyéni attribútumokhoz tartozó értékekre.

[[type:variable|default value]]

A rendszer a dupla szögletes zárójelek – [[ és ]] – közötti információt értelmezi.

Az első lépés a típus meghatározása, amely lehet cart (ha kosáradatokat használsz) vagy attribute (ha egyéni attribútumot szeretnél megjeleníteni).

A típust kettőspont (:) követi, majd az attribútum vagy változó neve. Ennek a változónévnek pontosan meg kell egyeznie azzal, amit a JavaScript kódban használtál. Nem tartalmazhat speciális karaktereket, és nagybetű–kisbetű érzékeny, tehát a Name és a name két különböző változónak számít.

Az utolsó rész opcionális: a változónév után függőleges vonal (|) következhet, majd az az alapértelmezett szöveg, amit akkor szeretnél megjeleníteni, ha az attribútum nem elérhető, azaz nem érkezik érték a rendszerhez.

❗ A placeholder-ben nem lehet elírás! Ha a rendszer nem tudja értelmezni, a teljes placeholder szöveg jelenik meg a popupon.

❗ Az egyéni attribútum neve pontosan meg kell egyezzen a JavaScript kódban megadott névvel.

6. Hogyan állíthatsz be dinamikusan változó országzászlókat?

  1. Illeszd be az alábbi kódot a CSS szerkesztőbe (CSS Editor):

Monosnap%2BOptiMonk%2BAdmin%2B2023-03-02%2B12-15-50.png

.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;
}
  1. Illeszd be az alábbi kódot a JS szerkesztőbe, a Page Load (Oldal betöltése) szekció alá:

Monosnap%2BOptiMonk%2BAdmin%2B2023-03-02%2B12-20-32.png

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');
}
  1. Használj Smart Taget

Használd az alábbi Smart Taget a kampányodban: [[attribute:emoji_flag]]

❗ Fontos: az emoji_flag legyen dőlt betűs formázású!

7. Mire figyelj oda a Smart Tag-ek alkalmazásakor?

❗ Figyelj arra, hogy a karakterekben ne legyen elírás! Ha hibás a megadott szöveg, akkor a rendszer nem fogja lecserélni, és a teljes placeholder jelenik majd meg az üzenetben.

❗ A változónévnek pontosan meg kell egyeznie a JavaScript kódban használt névvel. Nem tartalmazhat speciális karaktereket, és megkülönbözteti a kis- és nagybetűket is.

✉️ Ha kérdésed van, vagy segítségre van szükséged, írj nekünk a support@optimonk.com címre – örömmel segítünk! 😊

További kérdései vannak? Kérelem beküldése

Hozzászólások

Szolgáltató: Zendesk