Dokumentation
Installation der loopingo Monetise Integration
Für die Aktivierung der loopingo Monetise Integration sind folgende Schritte notwendig:
- Integration des Code Snippets auf der “Vielen-Dank”-Seite
- Befüllung der Parameter
- Eintragung der erlaubten Hosts in den CORS-Einstellungen im Partnerportal
Das Code Snippet hat folgende Struktur. Eine Erläuterung der jeweiligen Parameter sind in der anschließenden Tabelle zu finden.
DSGVO (GDPR) Erklärung:Der erste Block bis zu email
ist dazu da, um sicherzustellen, dass die Anzeigausspielung unique bleibt (order_id
/ token
), zum Tracking der Einlösungen (voucher_code
) und zum Abgleichen eines Werbewiderspruchs (email
).
Letzere geht nur gehashed an unsere Server.
Der zweite Block von country
bis order_amount
ist für die Auktion und geht verschlüsselt an unsere Server. Damit können wir den Kunden relevantere Ergebnisse liefern. Diese Daten sind datenschutztechnisch ohne weiteren Kontext unkritisch.
Der dritte Block von first_name
bis birthday
verlässt den Browser nie. Er dient rein dem Komfort des Kunden, wenn wir diese Daten bei spezifischen Angeboten vorausfüllen können.
<div id="loopingo-integration-container"> <script type="text/props"> { "token" : "00000000-0000-0000-0000-000000000000", "order_id" : "123-456-789", "voucher_code" : "XYZ-1234-ABC", "email" : "customer@email.de", "country" : "DE", "postal_code" : "80335", "gender" : "female", "order_amount" : "19.90", "first_name" : "Max", "last_name" : "Mustermann", "city" : "Musterhausen", "street" : "Musterstraße", "house_number" : "1", "birthday" : "1976-02-01", "is_test" : false } </script> </div> <script async src="https://integration.loopingo.com/bundle_v1.js" type="text/javascript"></script>
Parameterbeschreibung
Name | Beschreibung | Required | Validierung/Optionen |
---|---|---|---|
Konfiguration | |||
token |
Authentifizierung | true |
String |
is_test |
Einstellung für live oder test Umgebung |
true |
boolean |
Kundendaten | |||
order_id |
Bestellnummer (wird dem Kunden angezeigt) | true |
string |
voucher_code |
Verwendeter Gutschein Code | false |
string |
email |
Die Kunden E-Mail | true |
Valid Email |
first_name |
Vorname | false |
string |
last_name |
Nachname | false |
string |
city |
Stadt | false |
string |
street |
Straße | false |
string |
house_number |
Hausnummer | false |
string |
birthday |
Geburtstag | false |
string |
country |
Land (Rechnungsadresse) | true |
ISO3166 ALPHA-2 (DE, AT, CH) |
postal_code |
Postleitzahl (Rechnungsadresse) | true |
string |
gender |
Geschlecht (Rechnungsadresse) | true |
male|female|undefined |
order_amount |
Bestellwert in EUR (Ohne Währungszeichen) | true |
string |
Alternative Einbindung
Für eine Clientseitige Befüllung der Parameter kann folgendes Snippet verwendet werden.
<div id="loopingo-integration-container"> <script id="loopingo-props" type="text/props"></script> </div>
// Set Customer Data var loopingo_object = { order_id : '00000', voucher_code : 'XYZ-1234-ABC', token : '00000000-0000-0000-0000-000000000000', email : 'demo@loopingo.com', first_name : 'Max', last_name : 'Mustermann', city : 'Musterhausen', street : 'Musterstraße', house_number : '1', birthday : '1976-02-01', country : 'DE', postal_code : '00000', gender : 'female', order_amount : '00.00', is_test : false, } // Inject to DOM document.getElementById('loopingo-props').innerText = JSON.stringify(loopingo_object); // Fetch loopingo integration App var script = document.createElement('script'); script.setAttribute( 'src', 'https://integration.loopingo.com/bundle_v1.js'); document.body.appendChild(script);
Javascript API & Manuelle Initialisierung
Die loopingo Integration wird standardmäßig automatisch gestartet, sobald die Applikation geladen wurde.
Mit folgendem Script kann über die Laufzeit-API die Integration manuell gestartet werden.
Zunächst muss die API wie folgt vorbereitet werden.
// Initialise API window.loopingo_data = window.loopingo_data || []; window.loopingoCall = window.loopingoCall || function() { loopingo_data.push(arguments); };
Nun kann mit der Integration interagiert werden:
// Manuelles starten der Integration window.loopingoCall('run') // Callback ausführen, falls keine Gutscheine angezeigt werden können window.loopingoCall('event_hook', 'onNothingToShow', () => console.log('nothing to show')) // Callback ausführen, wenn der Kunde einen Gutschein ausgewählt hat window.loopingoCall('event_hook', 'onClicked', () => console.log('clicked')) // Callback ausführen, wenn der Kunde das Fenster schließt window.loopingoCall('event_hook', 'onClosed', () => console.log('closed'))
Installation mit Vue.js
loopingo_integration.component.vue
<template> <div id="loopingo-integration-container"> <script id="loopingo-props" type="text/props">{{ props }}</script> </div> </template> <script> export default { name : 'loopingo-integration', props : [ 'token', 'voucher_code' 'email', 'first_name', 'last_name', 'city', 'street', 'house_number', 'birthday', 'country', 'postal_code', 'gender', 'order_amount', 'order_id', ], methods : { fetchLoopingoApp() { let script = document.createElement('script') script.setAttribute('src', 'https://integration.loopingo.com/bundle_v1.js') document.head.appendChild(script) } }, mounted() { let data = { token : this.token, voucher_code : this.voucher_code, email : this.email, first_name : this.first_name, last_name : this.last_name, city : this.city, street : this.street, house_number : this.house_number, birthday : this.birthday, country : this.country, postal_code : this.postal_code, gender : this.gender, order_amount : this.order_amount, is_test : false, order_id : this.order_id, } this.props = JSON.stringify(data) this.fetchLoopingoApp() }, data() { return { props : '', } } } </script>
example.vue
<template> <loopingo-integration token="00000000-0000-0000-0000-000000000000" order_id="123456789" voucher_code="XYZ-1234-ABC" order_amount="19.99" email="customer@email.de" city="Musterhausen" street="Musterstraße" house_number="1" birthday="1976-02-01" country="DE" postal_code="80469" gender="Male" ></loopingo-integration> </template> <script> import LoopingoIntegration from '../components/loopingo_integration.component' export default { components : {LoopingoIntegration}, } </script>
Conversion Tracking
Für das Tracking der eingelösten Gutscheincodes kann statt des manuellen CSV Uploads im Partnerportal folgendes Snippet verwendet werden.
voucher_code
oder email_hash
aber nicht beides übergeben wird.<script> // Package conversion data var loopingo_conversion_data = { voucher_code : 'ABCDEFGHIJ', order_amount : '19.95', email_hash : 'a79ef3036d3477fc414729752de56067', email_hash_method : 'md5', }; // Initialize API skeleton window.loopingo_data = window.loopingo_data || []; window.loopingoCall = window.loopingoCall || function() {loopingo_data.push(arguments);}; // Set your account token window.loopingoCall('set_token', "00000000-0000-0000-0000-000000000000"); // Set conversion data window.loopingoCall('conversion_set_data', loopingo_conversion_data); // Submit conversion window.loopingoCall('conversion_send_report'); </script> <script async src="https://conversion.loopingo.com/app.js" type="text/javascript"></script>