Dokumentation

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.

<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 (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',
    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.
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.

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>