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> Ohne die CORS-Eintragungen im Partnerportal kann die Integration nicht geladen werden.
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 |
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.
Das tracking funktioniert nur erwartungsgemäß, wenn entweder
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>
