Webhook integráció

1. Mikor érdemes Webhookot használni?

A Webhook kiváló eszköz, ha olyan rendszerrel szeretnénk összekapcsolni az OptiMonkot, amivel még nincs direkt integrációja az OptiMonknak. Továbbá akkor is hasznos eszköz, ha ugyan létezik hozzá direkt integráció az OptiMonk-ban, de olyan adatokat is szeretnél átadni, amit az alap OptiMonk integráció nem tud. Mind a két esetben szükséged lesz fejlesztési (programozási) kapacitásra ahhoz, hogy elkészítsd azt a kódot, amely feldolgozza az OptiMonk által átadott adatokat. Ha nincs fejlesztőd, akkor érdemes lehet elgondolkozni a Zapier használatán, ami szintén össze tudja kötni az OptiMonkot más rendszerekkel, és a beállítása nem igényel fejlesztői tudást.

2. Hogyan működik a Webhookos adatátadás?

Amennyiben be van állítva a Webhook integráció, akkor kampány kitöltésekor az OptiMonk elküld bizonyos adatokat az integrációnál megadott php oldalnak. Alapértelmezetten a következő adatok kerülnek továbbításra:

  • Keresztnév (változó: firstname)
  • Vezetéknév (változó: lastname)
  • Email cím (változó: email)
  • URL cím (változó: url)
  • Kampány név (változó: campaign[name])
  • Kampány ID (változó: campaign[id])
  • Kuponkód (változó: custom_fields[coupon_code], amennyiben a sablon "Lumira/Vegas")
  • GDPR checkbox érték (változó: custom_fields[om_policy_checkbox])
  • Telefonszám (változó: phone)
  • Lenyíló lista (változó: dropdown)
  • Checkbox (változó: checkbox)
  • Visszajelzés (változó: feedback)
  • Rádió gomb (változó: radio)
  • Ország (változó: country)
  • Város (változó: city)
  • Irányítószám (változó: zip)

https://webhook.site/

Screenshot_2022-06-28_at_10.57.08.png

 

Webhook-nál nem szükséges semmiféle plusz jelölés, ezáltal úgy a legegyszerűbb, ha azt a nevet adjuk meg a beviteli mezőn az OptiMonkon belül, ami a tárgy neve.

Jelenleg a Webhook nem tud késleltetett adatküldést kezelni. Ha a popup külön oldalon tartalmaz email és telefonszám beviteli mezőt, akkor az OptiMonk integrációs hibára fut. Miközben az adatokat a Webhook fogadja.
Ebben az esetben érdemes a beviteli mezőket azonos oldalra helyezni a popup-on belül.

3. Példa php oldal

A következő példa egy olyan minta kód, amely a Webhooktól megkapott adatokat elküldi emailben a feliratkozáskor megadott email címre, vagy egy előre definiált email címre.

A példa oldal php forráskódja:

<?php
echo "OptiMonk Webhook Test";
$emailAddress = "";

$webhookContent = "";
// get webhook data
$webhook = fopen('php://input', 'rb');
while (!feof($webhook)) {
    $webhookContent .= fread($webhook, 4096);
}
fclose($webhook);

// convert webhook data to Subscriber array
$rawData = explode("&", urldecode($webhookContent));
foreach ($rawData as $field) {
    $temp = explode("=", $field);
    $subscriber[$temp[0]] = $temp[1];
}

// set subject and recipient
if ( $emailAddress != "") {
    $to = $emailAddress;
    $subject = "New Subscriber!";
} else {
    $to = $subscriber["email"];
    $subject = "[OptiMonk Webhook test] Thank you for subscribing!";
}

$body = "Subscriber data: \n\r";

// write subscriber data in email body
foreach ($subscriber as $key => $value) {
    $body .= $key . ": " . $value . "\n";
}

// send mail
mail($to, $subject, $body);
die;
?>

 

A példa php oldal URL-címe:   https://www.optimonk.hu/webhook_sample.php

4. Tesztelés lépésről lépésre

OptiMonk php oldalon keresztül:

  1. Jelentkezz be az OptiMonk fiókodba a https://app.optimonk.com/login/hu oldalon

  2. Hozz létre egy új kampányt vagy válaszd ki bal oldalon a Kampányok menüt, és azon belül azt a Kampányt, ahol szeretnéd beállítani a Webhook integrációt:

    Screenshot_2022-06-28_at_11.01.03.png

  3. A jobb oldalon válaszd a Beállítások módosítása lehetőséget:

    Screenshot_2022-06-28_at_11.02.42.png

  4. Válaszd ki az Új integráció beállítása lehetőséget az Integrációk alatt:

    Screenshot_2022-06-28_at_11.04.07.png

  5. Válaszd ki a Webhookot a listáról:

    mceclip4.png

  6. Illeszd be a PHP oldalnak az URLjét és adj egy nevet az integrációnak:

    mceclip0.png
  7. Itt láthatod az OptiMonk kampányodba beillesztett mezőt, amelyet továbbít Webhookra.
    Az OptiMonk kampányod minden beviteli mezőjéhez hozzárendelhetsz egy mezőt a Webhook alkalmazásban. Miután egymáshoz rendelted a mezőket, az OptiMonk kampány adatai a megfelelő helyre kerülnek a Webhook-ban.
    Screenshot_2022-06-28_at_11.09.57.png
  8. A beállítások mentéséhez kattints a Kész majd jobb fent a Tovább gombra.
  9. Teszteld a beállításokat a weboldaladon megjelenítendő OptiMonk kampány kitöltésével. 
    Megjegyzés: Ha több OptiMonk kampányod van az oldaladon, győződj meg róla, hogy azt a kampányt töltöd ki, amellyel fel van állítva a Webhook integráció. 
  10. Ellenőrizd a Webhook-ra beérkezett adatokat: 
    Annyi logot fogsz látni Webhook-on, amennyi oldalt látott az OptiMonk kampányodból a látogató.
    Például: a kupon kód a harmadik oldalon található, emiatt a kupon kódot a Webhook harmadik logjában fogod megtalálni. Ezt a _META_ értékek között látni is fogod.
    Screenshot_2022-06-27_at_11.29.50.png
  11. Ezután amikor megjelent a popup, az általad kitöltött email címre fogja küldeni a Webhook az adatokat.

HookBin oldalon keresztül:

Az OptiMonk admin felületen válaszd ki a kampányt, ahol szeretnéd beállítani a HookBin integrációt, a 'Tesztelés lépésről lépésre' szekcióban leírtak szerint.

  1. Példánkban a hookbin.com weboldalt használjuk. Nyissuk meg a linket: http://hookbin.com/ és kattints a Create New Endpoint gombra:

    mceclip5.png

  2. Ez után másold ki a Bin URL-t:

    mceclip6.png

  3. A HookBin oldalát hagyd nyitva. Illeszd be az URL-t az OptiMonk admin oldalán az URL mezőbe, majd mentsd el a kampány beállításait Kész majd jobb fent a Tovább gombra kattintva.

    mceclip7.png

  4. Társítsd egymáshoz az OptiMonk kampányban megadott mezőket a HookBin mezőkhoz.
    Screenshot_2022-06-28_at_11.36.36.png
  5. Kattints a 'Kész', majd a 'Tovább' gombokra.
  6. Végül töltsd ki a kampányhoz tartozó popupot a saját weboldaladon, és frissítsd a HookBin oldalát.
    Ha minden rendben ment, akkor a következőhöz hasonló adatokat kell látnod:

    3..JPG

    A Body részben láthatod az OptiMonktól fogadott adatokat.

Ha bármi további kérdésed lenne, kérlek fordulj hozzánk bátran a support@optimonk.com email címen, és örömmel segítünk :) 

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

Hozzászólások

Szolgáltató: Zendesk