Minden popup, amit az OptiMonkban készítesz, eleve mobilra is elkészül – a rendszer külön asztali és mobil verziót készít ugyanahhoz a popuphoz, és mindkettőt szerkesztheted. Az, hogy tényleg megjelenik-e telefonon, a trigger eszközbeállításától.

Mind a hat trigger működik mobilon:

  • Kilépési szándékra
  • Késleltetés után
  • Görgetés után (a lap X%-a)
  • Kattintásra (egy adott elemre)
  • Inaktivitás után
  • JavaScript eseményre

Állítsd be, hogy a trigger mobilon is működjön

  1. Nyisd meg a Kampányok menüpontot a bal oldali menüben, és kattints a szerkesztendő kampányra.

  2. Nyisd meg a Beállítások fület. Az első szakasz a Mikor jelenjen meg a popup.

  3. Kattints egy már meglévő trigger kártyájára a szerkesztéshez, vagy kattints a Trigger hozzáadása gombra, és válassz egyet a listából.

  4. A párbeszédpanelen az Eszközök résznél kapcsold Mobil kapcsolót bekapcsolt állásba. A popup akkor jelenik meg telefonon, ha a Mobile kapcsoló be van kapcsolva – önmagában vagy a Desktop kapcsolóval együtt.

  5. Kattints a Mentés gombra a párbeszédpanelen, majd a Módosítások mentése gombra a szakasz alján.

💡 A triggerek VAGY logikával kapcsolódnak össze – a kampány akkor indul el, ha bármelyikük teljesül. Így egy kampányban egyszerre használhatsz kilépési szándékot mobilon és késleltetést desktopon.

Kattintásra és a JavaScript eseményre kissé eltérően működik: nincs egyetlen közös eszközkapcsolójuk, mert minden CSS-szelektor sorhoz és minden eseménynév sorhoz saját Asztali / Mobil kapcsoló tartozik. Így egy szelektor lehet csak mobilra, a következő pedig csak desktopra beállítva.

Ezt a chatben is egyszerűen kérheted – például: „jelenítsd meg ezt mobilon is” – és a beállítások panel a beszélgetés közben azonnal frissül.

A popup mobil verziója

A rendszer minden kampányhoz két dokumentumot készít: egy desktop és egy mobil verziót. A popup szerkesztőben a két ikon (monitor / telefon) felül a kettő között váltogat, és a mellettük lévő méret-legördülő menüvel megnézheted, hogy az adott verzió hogyan néz ki más képernyőméreteken.

Mivel ez két külön dokumentum, az egyik nézeten végzett módosítás nem jelenik meg automatikusan a másikon. A szerkesztő ezt kezeli helyetted:

  • Egy szövegmódosítás után megkérdezi, hogy a másik nézetre is átvigye-e a változást (Igen / Nem).
  • Ha a két nézet eltér egymástól, egy jelvény jelzi ezt az eszköztárban, és rákattintva átugorhatsz a másik nézetre.
  • Ha egy módosítást nem lehetett átvinni, figyelmeztetést kapsz róla, nem marad néma.
  • Mentés közben figyelmeztetést kapsz, ha a változás bármelyik előnézeti méretnél túlcsordulást (overflow) okozott.

A megszokott munkafolyamat tehát: szerkesztés desktopon, igen a szinkronizálási kérdésre, majd váltás a mobil nézetre és ellenőrzés.

💡 A popupok ebben az appban két formátumban léteznek: card (középre helyezett popup elhalványított háttér előtt) és fullscreen. Az oldalsáv (sidebar), nanobar és sticky bar típusok itt nem elérhetők.

A hat trigger mobilon

Kilépési szándéknál

Telefonon nincs kurzor, így a kilépési szándékot a látogató viselkedéséből olvassuk ki – lapváltás, gyors visszagörgetés a tetejére, vagy a Vissza gomb használata. A részletek az Exit-intent trigger mobileszközökön című cikkben találhatók.

Fontos: egyes mobil böngészők nem támogatják ezen viselkedések mindegyikét, és ha egy jel hiányzik, az adott viselkedés nem indítja el a triggert.

Kattintásra

Ehhez egy kis CSS- és HTML-ismeret szükséges lehet, mert azonosítanod kell a kattintható elemet a weboldalad forráskódjában.

Ezzel jelenítheted meg a popupot, amikor a látogató megkoppint egy adott részt az oldaladon – egy dobozt, egy linket, egy bannert. Ilyenkor a popup egy mini landing page-ként viselkedik. Adj meg bármilyen CSS-szelektort: egy elemnevet, egy osztályt, egy azonosítót (ID), vagy azok kombinációját:

  • a — bármely link elem
  • div.container > a — bármely link, amely egy DIV gyermeke, az alábbi CSS-osztállyal container
  • table > a.delete — bármely link, amelynek a delete osztálya van, és egy táblázatelem (table) gyermeke
  • #container — egy elem, amelynek az azonosítója (id) container
  • #container > * — bármely elem, amely az adott id-vel rendelkező elem gyermeke container

Egy gyermekelemre koppintás is elindítja a kampányt, ha a gyermekelem egy egyező elemen belül található.

Megjegyzés: a gyakoriságkorlátozás nem érvényes erre a triggerre – kattintásra a kampány mindig megjelenik, amíg a célzási szabályok illeszkednek.

Görgetés után

A popup akkor jelenik meg, amikor a látogató legalább a lap X%-át legörgette (1–100). Ez az aktív látogatókat fogja meg. Egy blogon például feliratkoztathatod azokat az olvasókat, akik a bejegyzés legalább 50%-át elgörgették – ha ennyire élvezik, jó eséllyel szeretnének értesülni a következőről is.

Inaktivitás után

A popup azoknak a látogatóknak jelenik meg, akik legalább X másodpercig inaktívak voltak – nincs koppintás, nincs görgetés. Az érték 1 és 60 másodperc között állítható.

Késleltetés után

A popup azoknak a látogatóknak jelenik meg, akik legalább X másodperce (0–60) az oldalon vannak. A számláló csak azután indul el, hogy az oldal teljesen betöltődött az eszközön. Ha 0-ra állítod, akkor belépési popuppá válik, amely a látogató érkezésének pillanatában jelenik meg – a kártyán ekkor ez szerepel: Azonnal.

JavaScript eseményre

A popup azután jelenik meg, hogy a látogató elvégzett egy olyan műveletet, amelyet a többi trigger nem fed le. Add meg a saját kódodból indított DOM-esemény nevét – például user_login amikor egy regisztrált látogató bejelentkezik:

document.dispatchEvent(new Event('user_login', { bubbles: true }))