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.
<div id="loopingo-integration-container">
<script type="text/props">
{
"token" : "00000000-0000-0000-0000-000000000000",
"order_id" : "123-456-789",
"email" : "customer@email.de",
"country" : "DE",
"postal_code" : "80335",
"gender" : "female",
"order_amount" : "19.90",
"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 |
email |
Die Kunden E-Mail | true |
Valid Email |
country |
Land | true |
ISO3166 ALPHA-2 (DE, AT, CH) |
postal_code |
Postleitzahl | true |
string |
gender |
Geschlecht | 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',
token : '00000000-0000-0000-0000-000000000000',
email : 'demo@loopingo.com',
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);
Manuelle Initialisierung
Die loopingo Integration wird standardmäßig automatisch gestartet, sobald die Applikation geladen wurde.
Für einen manuellen Start muss zunächst der autostart über die Konfiguration deaktiviert werden:
{
"token" : "00000000-0000-0000-0000-000000000000",
"order_id" : "123-456-789",
"email" : "customer@email.de",
"country" : "DE",
"postal_code" : "80335",
"gender" : "female",
"order_amount" : "19.90",
"is_test" : false,
"configuration" : {
"autostart" : false
}
}
Mit folgendem Script kann über die Laufzeit-API die Integration manuell gestartet werden.
// Initialise API
window.loopingo_data = window.loopingo_data || [];
window.loopingoCall = window.loopingoCall || function() { loopingo_data.push(arguments); };
// Launch loopingo Monetise Integration
window.loopingoCall('run');
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',
'email',
'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,
email : this.email,
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"
order_amount="19.99"
email="customer@email.de"
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.
<script>
// Package conversion data
var loopingo_conversion_data = {
voucher_code : 'ABCDEFGHIJ',
order_amount : '19.95',
email_hash : 'a79ef3036d3477fc414729752de56067',
email_hash_method : 'md5|sha1|sha224|sha256',
};
// 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>
