Konverziókövetés (GA4 és Meta pixel) az időpontfoglalóban

Ez az útmutató bemutatja, hogyan tud egy partner (például egy marketingügynökség, amely az ügyfél Google Ads és Meta/Facebook kampányait kezeli) mérni a Clearvis.io beágyazott időpontfoglalóján keresztül sikeresen létrejött foglalásokat.

A foglaló az ügyfél saját weboldalán fut, ezért a pixel az ügyfél oldalán sül el — a Clearvis.io nem küld adatot a Google vagy a Meta felé a partner nevében. Az integráció úgy működik, hogy figyeljük azt a pillanatot, amikor a foglalás sikeresen befejeződik, és ekkor futtatjuk le a mérőkódot.

információ

Kinek szól. Ez az oldal olyan webfejlesztőknek vagy marketingmérnököknek készült, akik szerkeszteni tudják annak az oldalnak a HTML-jét, ahová a foglaló be van ágyazva. A Clearvis.io oldalán semmilyen módosítás nem szükséges.

A foglaló forráskódja: github.com/clearvis-io/clearvisio-appointment-booker

Hogyan működik

A foglaló belsőleg egy moduleState értéket tárol a store-jában. Amikor a látogató eléri a sikeres foglalás képernyőt, ez az érték 'success' lesz — ez a konverziós jelzésünk. Két módon lehet erre rácsatlakozni:

1. onSuccessCallback (ajánlott) — egy konstruktor-opció, amelyet pontosan erre a célra hoztak létre. Abban a pillanatban lefut, amikor a foglalás sikeres, és átadja a teljes foglalási állapotot (időpont- és ügyféladatok), így akár értékeket is átadhatsz a pixeleknek.
2. close esemény + moduleState ellenőrzés — egy egyszerű alternatíva, amely a már legenerált beágyazó kódrészletbe illeszkedik, annak átalakítása nélkül. Akkor sül el, amikor a látogató bezárja a foglalót, és csak akkor számít konverziónak, ha a moduleState == 'success'.

Előfeltételek

Mielőtt szerkesztenéd a foglaló kódrészletét, győződj meg róla, hogy a mérőkódok alapkódjai már be vannak töltve az oldalon:

• Google Ads / GA4 — a globális oldalcímkének (gtag.js) jelen kell lennie, hogy a gtag() elérhető legyen. Szükséged lesz a konverziós azonosítóra és címkére (AW-XXXXXXXXX/AbCdEfGhIj) a Google Ads-fiókból.
• Meta Pixel — a Meta Pixel alapkódjának jelen kell lennie, hogy az fbq() elérhető legyen. Szükséged lesz a Pixel ID-ra a Meta Eseménykezelőből.

vigyázat

Az alábbi konverziós hívások feltételezik, hogy a gtag / fbq már definiálva van. Ha az alapkódok nincsenek az oldalon, a hívások „not defined" hibát dobnak, és semmi nem mérődik. A példákban lévő typeof ... === 'function' ellenőrzések megakadályozzák, hogy ez megtörje az oldalt.

1. lehetőség — onSuccessCallback (ajánlott)

Az onSuccessCallback a ClearvisioAppointmentBooker konstruktorának egy opciója. Egyszer fut le, abban a pillanatban, amikor a foglalás sikeres, és megkapja az aktuális state objektumot (időpont adatai, ügyfélinformációk stb.). Ez a hivatalosan szánt hely az analitikai események küldésére.

Add hozzá az onSuccessCallback kulcsot a konstruktornak átadott konfigurációs objektumhoz:

var booker = new ClearvisioAppointmentBooker(Object.assign({
    "storeCode": "OFFICE-hu_HU",
    "apiPath": "https://clearvis.io/b/.../",
    "apiHeaders": { "X-AUTH-API-TOKEN": "..." },
    "country": "HU",
    "style": "embedded-safe",
    "cssUrls": [ "https://clearvis.io/b/.../style.css" ],

    // ↓↓↓ ezt add hozzá ↓↓↓
    "onSuccessCallback": function (state) {
        // --- Google Ads konverzió ---
        if (typeof gtag === 'function') {
            gtag('event', 'conversion', {
                'send_to': 'AW-XXXXXXXXX/AbCdEfGhIj' // cseréld a saját konverziós ID-dra/címkédre
            });
        }

        // --- Meta Pixel konverzió ---
        if (typeof fbq === 'function') {
            fbq('track', 'Schedule');
        }
    }
}, parentElement, additionalConfig));

Mivel a callback megkapja a foglalás state objektumát, a foglalás adatait is átadhatod a pixeleknek (hasznos a fejlett konverziókhoz vagy a duplikációk kiszűréséhez):

"onSuccessCallback": function (state) {
    var appointmentId = state.appointment && state.appointment.id;

    if (typeof gtag === 'function') {
        gtag('event', 'conversion', {
            'send_to': 'AW-XXXXXXXXX/AbCdEfGhIj',
            'transaction_id': appointmentId // segít a Google-nek a duplikációk kiszűrésében
        });
    }
    if (typeof fbq === 'function') {
        fbq('track', 'Schedule', {}, { eventID: appointmentId });
    }
}

2. lehetőség — close esemény + moduleState ellenőrzés

Ha inkább nem nyúlnál a konstruktor konfigjához, a store close eseményére is rácsatlakozhatsz. Minden legenerált beágyazó kódrészlet egy egysoros close kezelővel végződik:

// A legenerált kódrészlet utolsó sora:
booker.getStore().on('close', () => document.head.removeChild(link))

Cseréld ki az alábbi, kibővített változatra. Ez megtartja az eredeti stíluslap-eltakarítást, és a konverziót csak akkor futtatja, ha a foglalás valóban sikeres volt:

booker.getStore().on('close', () => {
    // A konverziókövetés csak akkor fut le, ha a foglalás valóban sikeres volt.
    if (booker.getStore().get().moduleState == 'success') {

        // --- Google Ads konverzió ---
        if (typeof gtag === 'function') {
            gtag('event', 'conversion', {
                'send_to': 'AW-XXXXXXXXX/AbCdEfGhIj' // cseréld a saját konverziós ID-dra/címkédre
            });
        }

        // --- Meta Pixel konverzió ---
        if (typeof fbq === 'function') {
            fbq('track', 'Schedule');
        }
    }

    // Tartsd meg az eredeti eltakarítást, hogy a beszúrt stíluslap bezáráskor törlődjön.
    document.head.removeChild(link);
});

tanács

Tartsd meg az eltakarító sort. Az eredeti kezelő bezáráskor eltávolította a beszúrt <link> stíluslapot (document.head.removeChild(link)). Ezt a sort tartsd meg az új kezelőn belül, különben a stíluslap minden bezáráskor bennragad az oldalon.

megjegyzés

Időzítésbeli különbség a két lehetőség között. Az onSuccessCallback azonnal lefut, amint megjelenik a sikeres foglalás képernyő. A close alapú megoldás csak akkor fut le, amikor a látogató bezárja a foglalót egy sikeres foglalás után. Ha a látogató foglal, de sosem zárja be a modult (pl. otthagyja a fület), a close alapú megoldás elmulaszthatja a konverziót — ezért ajánlott az onSuccessCallback.

Platformspecifikus megjegyzések

Google Ads / GA4

A Google Ads konverziókhoz conversion típusú event-et használj a konverziós művelet send_to értékével (formátum: AW-XXXXXXXXX/AbCdEfGhIj):

gtag('event', 'conversion', {
    'send_to': 'AW-XXXXXXXXX/AbCdEfGhIj'
});

Egy GA4 egyéni eseményhez (pl. közönség építéséhez vagy GA4-ben konverzióként való importáláshoz) küldj elnevezett eseményt a mérési azonosítódra:

gtag('event', 'booking_completed', {
    'send_to': 'G-XXXXXXXXXX'
});

Meta / Facebook

A Meta rendelkezik egy standard Schedule eseménnyel, amely illik az időpontfoglaláshoz:

fbq('track', 'Schedule');

Ha inkább egyéni eseményt szeretnél (az Eseménykezelőben létrehozott egyéni konverzióhoz), használd ezt:

fbq('trackCustom', 'BookingCompleted');

Az integráció tesztelése

1. Nyisd meg az ügyfél oldalát, és végezz el egy tesztfoglalást a foglalón keresztül.
2. Érd el a sikeres foglalás képernyőt (a 2. lehetőségnél zárd is be a foglalót).
3. Ellenőrizd, hogy az események elsülnek-e:
   • Google — használd a Google Tag Assistant eszközt vagy a böngésző hálózati fülét (keress egy kérést a google-analytics.com / googleadservices.com felé).
   • Meta — használd a Meta Pixel Helper böngészőbővítményt, és nézd meg az Eseménykezelő → Teszt események fület.
4. Ellenőrizd, hogy a konverzió csak akkor számolódik, amikor a foglalás befejeződik — a folyamat elhagyása ne süssön el semmit, mert a moduleState ilyenkor nem lesz 'success'.

megjegyzés

A foglaló domain-korlátozása. A foglaló szkript csak az adott foglaló-példányhoz beállított domaineken fut le. Az ügyfél éles domainjén (vagy egy beállított teszt-domainen) tesztelj, ne localhost-on.