Dokumentation

Installation der loopingo Monetise Integration

Für die Aktivierung der loopingo Monetise Integration sind folgende Schritte notwendig:

  1. Integration des Code Snippets auf der “Vielen-Dank”-Seite
  2. Befüllung der Parameter
  3. 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.

loopingo setzt in diesem Prozess keine Cookies auf dem Gerät des Kunden.
<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);

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.

// 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',
            '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|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>