Egyedi HTML sablon használata

Egy példa, hogy hogyan is néz ki egy egyedi HTML sablon kódja:

<form class="OM-form">
    <div class="OM-box">
        <div class="OM-box-form-line">
            <label>Firstname:</label>
            <input type="text" name="visitor[firstname]" data-error="[ERROR_TEXT]" data-validations="required">
        </div>
        <div class="OM-box-form-line">
            <label>Lastname:</label>
            <input type="text" class="OM-visitor-lastname" data-error="[ERROR_TEXT]" data-validations="required">
        </div>
        <div class="OM-box-form-line">            
            <label>Email:</label>
            <input type="text" class="OM-visitor-email" name="visitor[email]" data-error="[ERROR_TEXT]" data-validations="required email">
        </div>       
        <div class="OM-box-form-line">
            <label>My custom field</label>
            <input type="text" name="custom_fields[my_custom_field]">
            </div>
        <div class="OM-box-form-line">
            <input type="hidden" name="custom_fields[hidden_custom]" value="My OptiMonk Campaign">
        </div>

        <!-- 1. Submitting data, then closing the popup -->
        <div class="OM-box-form-line OM-box-form-line-button">
      <input type="submit" class="OM-button OM-submit OM-close" value="[BUTTON_TEXT]">
        </div>

        <!-- 2. Submitting data, then redirecting to another page on the same tab -->
        <div class="OM-box-form-line OM-box-form-line-button">
      <input type="submit" class="OM-button OM-submit OM-redirect" value="[BUTTON_TEXT]" data-redirectUrl="[REDIRECT_URL]">
        </div>

        <!-- 3. Submitting data, then redirecting to another page on a new tab -->
        <div class="OM-box-form-line OM-box-form-line-button">
      <input type="submit" class="OM-button OM-submit OM-redirect-blank" value="[BUTTON_TEXT]" data-redirectUrl="[REDIRECT_URL]">
        </div>

        <!-- 4. Custom behavior -->
        <div class="OM-box-form-line OM-box-form-line-button">
            <a class="OM-popup-button" onclick="onButtonClick()">[BUTTON_TEXT]</a>
        </div>

        <!-- 5. Redirect using a link instead of a button -->
        <div class="OM-box-form-line OM-box-form-line-button">
      <a class="OM-button OM-close OM-redirect-blank" href="[REDIRECT_URL]">[BUTTON_TEXT]</a>
        </div>
    </div>
</form>

OptiMonk segítségével létrehozhatsz egyedi popupokat, a rendszer pedig értelmezni fogja a HTML tag-eket és attribútumokat.

OptiMonk formok HTML tag-jei és attribútumai

Fontos, hogy a következő szabályokat betartsd a HTML tag-ekkel és attribútumokkal kapcsolatban.

  • Azokat a beviteli mezőket, amik adatot továbbítanak OptiMonk felé, form tag-ek közé kell elhelyezni és az osztálynak az „OM-form” osztálynevet kell adni. Például: <form class=”OM-form”> … </from>
  • A beviteli mezőknek, annak érdekében, hogy az adatok továbbításra kerüljenek, adni kell egy nevet vagy egy osztályt. Például: name=”visitor[lastname]”, or, class=”OM-visitor-lastname”.
  • A beviteli mezők rendelkeznek validációval is. A data-validation és data-error tag-ek felelnek ezért. A data-error értéke lesz az az üzenet, amit megjelenítünk, ha helytelen adat kerül beírásra.

Mi történik, ha kitöltik a formot?

Különböző metódusokat használhatsz arra vonatkozóan, hogy mi történjen, ha valaki kitölti a formot:

  • Adatátadás után, záródjon be a popup.
  • Adatátadás után, átirányítjuk a látogatót egy másik oldalra, ugyanazon a lapon. Ebben az esetben a [REDIRECT_URL] helyére be kell helyettesíteni a cél URL-t.
  • Az előző esethez hasonlóan átirányítjuk a látogatót, viszont a cél URL-t egy másik lapon nyitja meg.
  • Használhatsz saját egyedi metódust a kitöltés kezelésére.

Ha jártas vagy a JavaScript nyelvben, akkor ezeket a funkciókat pár sorban könnyedén implementálhatod. Azonban ezeket a funkciókat sokkal könnyebb kezelni osztályokkal. Vannak előre definiált osztályaink, amiket használhatsz a popup-oknál, ahogyan azt a fenti példakódban is tettük.

Nevek és osztályok hozzárendelése

Itt még több segítséget találsz, hogy hogyan használd a neveket és osztályokat az OptiMonk-nak való adatátadás során. Használhatsz neveket vagy osztályokat, hogy megmond az OptiMonk-nak, hogy milyen beviteli mezőid vannak.

Nevek használata:

  • name=”visitor[firstname]”
  • name=”visitor[lastname]”
  • name=”visitor[email]”

Ha valamilyen oknál fogva, nem tudsz nevet rendelni, például már más okból használod azt a nevet, akkor helyette rendelhetsz osztályt a beviteli mezőkhöz.

Osztályok használata:

  • class=”OM-visitor-firstname”
  • class=”OM-visitor-lastname”
  • class=”OM-visitor-email”

Gombok és linkek használata

Többféle osztályt hozzárendelhetsz egy gombhoz vagy linkhez. Ekkor a következő sorrendben fognak végrehajtódni:

OM-button

FONTOS: Ez az osztály szükséges ahhoz, hogy az OptiMonk feldolgozhassa a további, lentebb látható osztályokat.

OM-submit

FONTOS: Ez az osztály szükséges azokhoz a gombokhoz és linkekhez, amelyek a form kitöltését véglegesítik és adatot továbbítanak az OptiMonk felé.

Ha a form tag-ek között van egy ’action’ és opcionálisan egy ’method’ attribútum, akkor a form képes az adatokat a megadott címre továbbítani.
Például: <form action=”[DESTINATION]” method=”[METHOD]”>, ahol a METHOD lehet ’post’ vagy ’get’.

OM-redirect, OM-redirect-blank

Ezek az osztályok felelnek az átirányításért. Ha van megadott cél URL, akkor a látogatót átirányítjuk erre az URL-re.

  • OM-redirect ugyanazon a lapon fogja átirányítani a látogatót, elnavigálva a látogatót a forrás oldalról
  • OM-redirect-blank új lapon fogja megnyitni a cél URL-t

A gombok esetében, a rendszer az URL-t a ’data-redirect-url’ vagy a ’data-redirecturl’ tag-ekben keresi, míg a linkek esetében, a href attribútumban nézi meg először (lásd a fenti példakód 5. blokkjában).

OM-close

Ha ez az osztály hozzá van rendelve az elemhez, akkor az elemre való kattintás után bezárul a popup.

OM osztályok nélkül, így néz ki egy egyedi HTML sablon kódja:

<form class="OM-form">
    <div class="OM-box">
        <div class="OM-box-form-line">
            <label>Firstname:</label>
            <input type="text" name="visitor[firstname]" data-error="[ERROR_TEXT]" data-validations="required">
        </div>
        <div class="OM-box-form-line">
            <label>Lastname:</label>
            <input type="text" name="visitor[lastname]" data-error="[ERROR_TEXT]" data-validations="required">
        </div>
        <div class="OM-box-form-line">
            <label>Email:</label>
            <input type="text" name="visitor[email]" data-error="[ERROR_TEXT]" data-validations="required email">
        </div>

        <!-- 1. Submitting data, then closing the popup -->
        <div class="OM-box-form-line OM-box-form-line-button">
            <input type="submit" class="OM-popup-button" value="[BUTTON_TEXT]" data-action="closePopup">
        </div>

        <!-- 2. Submitting data, then redirecting to another page -->
        <div class="OM-box-form-line OM-box-form-line-button">
            <input type="submit" class="OM-popup-button" value="[BUTTON_TEXT]" data-action="redirect" data-redirectUrl="[REDIRECT_URL]">
        </div>

        <!-- 3. Custom behavior -->
        <div class="OM-box-form-line OM-box-form-line-button">
            <a class="OM-popup-button" onclick="onButtonClick()">[BUTTON_TEXT]</a>
        </div>
    </div>
</form>

Ha nem használunk OM osztályokat, akkor is ugyanazok a szabályok, viszont neked kell létrehozni és elhelyezni a JavaScript-eket és megírni a selector-okat egy bizonyos elemre.

Popup kitöltés egyedi kezelése

JavaScript API

Egyedi HTML sablon használata esetén JavaScript API segítségével lehet bizonyos viselkedéseket és funkciókat megvalósítani, illetve ezen kívül a popup forráskódja tartalmazza a jQuery framework-öt, így ezek a függvények is elérhetőek. 
A következő JavaScript metódus hívások érhetőek el:

OptiMonk.resize(width, height)

A popup-ot magába foglaló iframe átméretezésére szolgál. A szélességet és magasságot pixel-ben kell megadni.

OptiMonk.resize('800px', '600px');

OptiMonk.close()

A popup bezárására szolgál. A popup-ot magába foglaló iframe-t és a körülötte lévő overlay-t rejti el.

OptiMonk.close();

OptiMonk.redirect(url)

A paraméterben megadott url-re irányít át. Belső oldalra irányítás esetén elegendő a relatív elérési útvonalat megadni. Külső oldalra irányításnál viszont protokollal együtt kell megadni az urlt.

OptiMonk.redirect('/register'); //Oldalon belül
OptiMonk.redirect('http://www.optimonk.hu/'); //Külső oldalra

OptiMonk.markFilled()

Egy adott kampány státuszát állíthatjuk be kitöltöttre. Amennyiben a kampány kitöltött státuszba kerül, többször nem jelenik meg a látogatónak.

OptiMonk.markFilled();

OptiMonk.validate(form)

A kiválasztott form adatait validáljuk az inputok data-validations attribútuma alapján. Amennyiben hibás valamelyik adat a hibaüzenetet is automatikusan megjeleníti. Egy paramétere van: form: Bármilyen form HTML elemet, jQuery objektumot, illetve selector-t megadhatunk.

OptiMonk.validate('#myForm');

OptiMonk.submit(form, callback)

A kiválasztott form adatait lehet elküldeni az OptiMonk-nak. Ebben az esetben az adatok kezelése ugyanúgy történik, mint a többi sablon esetén. Tehát az admin felületen beállított integrációba és belső adatbázisba is bekerülnek a látogatói adatai. Két paramétere van: form: Bármilyen form HTML elemet, jQuery objektumot, illetve selector-t megadhatunk. Amennyiben üresen hagyjuk akkor a '.OM-form:first' selectorral fogja a rendszer keresni a formot. callback: Bármilyen valid JavaScript függvényt megadhatunk. Az AJAX hívás végeztével fogja a rendszer lefuttatni. Amennyiben üresen hagyjuk akkor automatikusan az OptiMonk.markFilled metódus fog lefutni. Ha felüldefiniáljuk az alap működést, akkor figyeljünk oda, hogy az OptiMonk.markFilled metódust is hívjuk meg a callback függvényben.

OptiMonk.submit();
OptiMonk.submit(
    '#myForm',
    function () {
        myFunction(); // egyedi JavaScript
        OptiMonk.markFilled();
        OptiMonk.close();
    });
);

OptiMonk.convert(data, callback)

JavaScript objektumot lehet elküldeni az OptiMonk-nak. Ebben az esetben az adatok kezelése ugyanúgy történik, mint a többi sablon esetén. Tehát az admin felületen beállított integrációba és belső adatbázisba is bekerülnek a látogatói adatai. Két paramétere van: data: JavaScript objektum. Amennyiben üresen hagyjuk, akkor csak a konverzió lesz jelentve, a látogató adatai nem. callback: Bármilyen valid JavaScript függvényt megadhatunk. Az AJAX hívás végeztével fogja a rendszer lefuttatni. Amennyiben üresen hagyjuk akkor automatikusan az OptiMonk.markFilled metódus fog lefutni. Ha felüldefiniáljuk az alap működést, akkor figyeljünk oda, hogy az OptiMonk.markFilled metódust is hívjuk meg a callback függvényben.

OptiMonk.convert(); //Jelenti a konverziót és "filled" tehát kitöltött állapotra állítja a kampányt
OptiMonk.convert(
    {visitor:{firstname: 'NameOfVisitor'}},
    function () {
        myFunction(); // egyedi JavaScript
        OptiMonk.markFilled();
        OptiMonk.close();
});

Példák

Igény: A gombra kattintásnál szeretném, ha bezáródna a popup és többször nem jelenne meg.

Ebben az esetben a kitöltés nem jelenik meg az admin felületen a statisztikában. A következő JavaScript kódot kell elhelyezni:

<script>
    function onButtonClick () {
        OptiMonk.markFilled();
        OptiMonk.close();
    }
</script>

Igény: A gombra kattintásnál szeretném átirányítani a látogatót ide: http://www.example.com. Illetve ezek után többször ne jelenjen meg.

Ebben az esetben a kitöltés nem jelenik meg az admin felületen a statisztikában. A következő JavaScript kódot kell elhelyezni:

<script>
    function onButtonClick () {
        OptiMonk.markFilled();
        OptiMonk.redirect('http://www.example.com');
    }
</script>

Igény: A popup kitöltése után az adatokat szeretném elküldeni az OptiMonk-nak majd záródjon be a popup.

Ekkor a kitöltés jelentésre kerül, tehát a statisztikában is meg fog jelenni az admin felületen. A következő JavaScript kódot kell elhelyezni:

<script>
    function onButtonClick () {
        var form = $('.OM-form:first');
        if (OptiMonk.validate(form)) {
            OptiMonk.submit(
                form,
                function () {
                    OptiMonk.markFilled();
                    OptiMonk.close();
                }
            );
        }
    }
</script>

Igény: A popup kitöltése után az adatokat szeretném elküldeni az OptiMonk-nak majd szeretném átirányítani a látogatót erre az url-re: http://www.example.com.

A következő JavaScript kódot kell elhelyezni:

<script>
    function onButtonClick () {
        var form = $('.OM-form:first');
        if (OptiMonk.validate(form)) {
            OptiMonk.submit(
                form,
                function () {
                    OptiMonk.markFilled();
                    OptiMonk.redirect('http://www.example.com');
                }
            );
        }
    }
</script>

Igény: Inputokat nem tartalmaz a popupom, csak átirányítani szeretném a látogatót, illetve szeretném, hogy az admin felületen a statisztikában is megjelenjen a konverzió.

A következő JavaScript kódot kell elhelyezni:

<script>
    function onButtonClick () {
        OptiMonk.convert({}, function () {
            OptiMonk.markFilled();
            OptiMonk.redirect('http://www.example.com');
        });
    }
</script>

Igény: Egy új fülön szeretném megnyitni az oldalt és nem átirányítani szeretném a látogatót.

A következőképpen kell a gomb HTML kódját módosítani:

<div class="OM-box-form-line OM-box-form-line-button">
    <a href="http://www.example.com" target="_blank" onclick="onButtonClick()">[BUTTON_TEXT]</a>
</div>

Illetve ezen kívül a következő JavaScript kódot kell elhelyezni:

<script>
    function onButtonClick () {
        OptiMonk.convert({}, function () {
            OptiMonk.markFilled();
            OptiMonk.close();
        });
    }
</script>

Igény: Saját rendszerbe szeretném elküldeni a kitöltés adatait.

A következő JavaScript kódot kell elhelyezni:

<script>
    function onButtonClick () {
        var form = $('.OM-form:first');
        if (OptiMonk.validate(form)) {
            //Submitting to external system
            $.ajax({
                type: 'POST',
                url: 'http://www.example.com/subscribe',
                data: {
                    firstname: form.find('input[name="visitor[firstname]"]').val(),
                    lastname: form.find('input[name="visitor[lastname]"]').val(),
                    email: form.find('input[name="visitor[email]"]').val()
                },
                dataType: 'json',
                success: function (response) {
                    //If successful, we also send it to OptiMonk
                    OptiMonk.submit(
                        form,
                        function () {
                            OptiMonk.markFilled();
                            OptiMonk.close();
                        }
                    );
                }
            });
        }
    }
</script>
Van még kérdése? Kérelem beküldése

Megjegyzések

Üzemelteti a Zendesk