Voucher App
Einbindung
Script im <head> Bereich oder vor dem Container der Webseite einfügen:
<script defer src="https://cdn.bnamic.com/voucher-app/voucher-app.js"></script>
Container an der gewünschten Stelle im <body> einfügen
<bn-voucher-app
id="BN-voucher-app"
class="BN-voucher-app"
data-lang="de"
data-code="###voucher-app_id###"
data-scroll-on-start="1"
data-offset-top="100"
data-offset-bottom="100"
>
</bn-voucher-app>
- data-lang: Sprache der Seite; Pflichtfeld; mögliche Werte: de/it/en
- data-code: Widgetcode als eindeutiger Schlüssel zur Ausgabe der korrekten Daten
- data-scroll-on-start: Definiert ob beim Laden der Webseite automatisch zum Widget gescrollt werden soll
- data-offset-top: Gibt den Abstand von oben bei der mitscrollenden Gutscheinvorschau in Pixel an
- data-offset-bottom: Gibt den Abstand von unten bei der mitscrollenden Gutscheinvorschau in Pixel an
API
Methode zum Setzen von Käuferdaten, welche im Formular übernommen werden.
Parameter:
- payload: Objekt welches folgende Informationen beinhaltet:
{
gender: string
company: string
firstname: string
lastname: string
country: string
street: string,
postalCode: string
city: string
email: string
phoneNumber: string
pec: string
taxNumber: string
vatNumber: string
sdiCode: string
message: string
}
window.BN.VoucherApp.setFields({
"gender": "c",
"company": "test",
"firstname": "Mario",
"lastname": "Rossi",
"country": "IT",
"street": "Musterstrasse 11",
"postalCode": "39100",
"city": "Bozen",
"email": "test@yanovis.com",
"phoneNumber": "+123456879",
"pec": "test",
"taxNumber": "test",
"vatNumber": "test",
"sdiCode": "test",
"message": "test"
})
Tracking
Die Tracking Events werden automatisch über den dataLayer des Google Tag Managers ausgelöst. Wenn der Google Tag Manager nicht in Verwendung ist, kann das Tracking mittels der Events von der Voucher App implementiert werden. Details zu den Events sind weiter unten zu finden.
Die dataLayer Events sind: select_item, add_to_cart, remove_from_cart, begin_checkout, add_payment_info, add_shipping_info und purchase. Der Payload wird bei den Events beschrieben.
Definition Ecommerce Item:
Parameter | Beschreibung |
item_id | ID des Gutscheines oder der zusätzlichen Leistungen |
item_name | Name des Gutscheines oder der zusätzlichen Leistung in der gewählten Widgetsprache |
item_variant | Typ des gewählten Gutscheines: Wertgutschein, Leistungsgutschein (Standard), Leistungsgutschein (Dynamisch), Leistung |
price | Der Preis des gewählten Gutscheines oder der zusätzlichen Leistung |
quantity | Die Anzahl der gewählten Gutscheine (immer 1) oder die Anzahl der zusätzlich gewählten Leistungen |
Events
Liste der Events, welche von der Voucher App gefeuert werden. Für weitere Informationen wie Events funktionieren, siehe https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events
window.addEventListener('voucher-app:purchase', function (event) {
// Payload des jeweiligen Events, siehe unten
console.log(event.detail)
});
voucher-app:created
Wird ausgelöst, nachdem das Widget erstellt wurde.
voucher-app:select_item
Wird ausgelöst, nachdem der Benutzer einen Gutschein gewählt hat.
Parameter | Beschreibung |
items.* | Siehe Ecommerce Item |
affiliation | Zuordnung des Gutscheins: Ist immer „Brandnamic Voucher App“ |
voucher-app:add_to_cart
Wird ausgelöst, nachdem der Benutzer zu den Käuferinformationen navigiert ist.
Parameter | Beschreibung |
items.* | Siehe Ecommerce Item |
currency | Die Währung vom Widget |
value | Der Gesamtwert des Gutscheinkaufes inklusive zusätzliche Leistungen |
affiliation | Zuordnung des Gutscheins: Ist immer „Brandnamic Voucher App“ |
voucher-app:remove_from_cart
Wird ausgelöst, nachdem der Benutzer von den Käuferinformationen zurück zu der Gutschein-Detailansicht navigiert ist.
Parameter | Beschreibung |
items.* | Siehe Ecommerce Item |
currency | Die Währung vom Widget |
value | Der Gesamtwert des Gutscheinkaufes inklusive zusätzliche Leistungen |
affiliation | Zuordnung des Gutscheins: Ist immer „Brandnamic Voucher App“ |
voucher-app:begin_checkout
Wird ausgelöst, nachdem der Benutzer seine Daten angegeben hat und zu „Bezahl- & Versandart“ navigiert ist.
Parameter | Beschreibung |
items.* | Siehe Ecommerce Item |
currency | Die Währung vom Widget |
value | Der Gesamtwert des Gutscheinkaufes inklusive zusätzliche Leistungen |
affiliation | Zuordnung des Gutscheins: Ist immer „Brandnamic Voucher App“ |
voucher-app:add_payment_info
Wird ausgelöst, nachdem der Benutzer die Bezahlart gewählt hat.
Parameter | Beschreibung |
items.* | Siehe Ecommerce Item |
currency | Die Währung vom Widget |
value | Der Gesamtwert des Gutscheinkaufes inklusive zusätzliche Leistungen |
payment_type | Der Titel der gewählten Zahlungsmethode in der Widgetsprache |
affiliation | Zuordnung des Gutscheins: Ist immer „Brandnamic Voucher App“ |
voucher-app:add_shipping_info
Wird ausgelöst, nachdem der Benutzer eine Versandart gewählt hat.
Parameter | Beschreibung |
items.* | Siehe Ecommerce Item |
currency | Die Währung vom Widget |
value | Der Gesamtwert des Gutscheinkaufes inklusive zusätzliche Leistungen |
shipping_tier | Der Titel der gewählten Versandart in der Widgetsprache |
affiliation | Zuordnung des Gutscheins: Ist immer „Brandnamic Voucher App“ |
voucher-app:purchase
Wird ausgelöst, nachdem der Benutzer den Kauf erfolgreich beendet hat.
Parameter | Beschreibung |
items.* | Siehe Ecommerce Item |
currency | Die Währung vom Widget |
value | Der Gesamtwert des Gutscheinkaufes inklusive zusätzliche Leistungen |
transaction_id | Die eindeutige ID des Gutscheinkaufes |
affiliation | Zuordnung des Gutscheins: Ist immer „Brandnamic Voucher App“ |