Dokumentation

1. Unsere Plugins

Sie können nutzen einfach eine unserer Vorlagen oder Plugins für Ihr Shop-System.

shopify
Shopify

Nutzen Sie unsere shopify Integrationvorlage auf BitBucket. Einfach den Token ersetzen und bei den Bestellskripten in shopify einfügen.

Zu Bitbucket
Gambio

Im Gambio Modul können Sie Ihren loopingo Token eintragen und das Widget wird nach Aktivierung auf Ihrer Bestellbestätigungsseite gezeigt.

Download plugin
WooCommerce logo
WooCommerce

Laden Sie das loopingo Wordpress Plugin für wooCommerce einfach im Plugin Store herunter. Token setzen und los geht's!

Zum Plugin Store
JTL logo
JTL

Installieren Sie das loopingo JTL Plugin, um loopingo bequem in Ihrem Webshop zu integrieren. Token eintragen & los geht's!

Zum Community Store
OXID esales
OXID eShop

Nutzen Sie für Ihren OXID Shop unsere Integrationsvorlage. Sie können diese hier herunterladen.

Vorlage herunterladen
Shopify logo
Shopware

Wir bieten sowohl für Shopware 5 als auch Shopware 6 Plugins. Einfach im Community Store herunterladen & mit Ihrem Token aktivieren.

Zum Community Store
shopify
Shopify

Nutzen Sie unsere shopify Integrationvorlage auf BitBucket. Einfach den Token ersetzen und bei den Bestellskripten in shopify einfügen.

Zu Bitbucket
Gambio

Im Gambio Modul können Sie Ihren loopingo Token eintragen und das Widget wird nach Aktivierung auf Ihrer Bestellbestätigungsseite gezeigt.

Download plugin
WooCommerce logo
WooCommerce

Laden Sie das loopingo Wordpress Plugin für wooCommerce einfach im Plugin Store herunter. Token setzen und los geht's!

Zum Plugin Store
JTL logo
JTL

Installieren Sie das loopingo JTL Plugin, um loopingo bequem in Ihrem Webshop zu integrieren. Token eintragen & los geht's!

Zum Plugin Store
OXID esales
OXID eShop

Nutzen Sie für Ihren OXID Shop unsere Integrationsvorlage. Sie können diese hier herunterladen.

Vorlage herunterladen
Shopify logo
Shopware

Wir bieten sowohl für Shopware 5 als auch Shopware 6 Plugins. Einfach im Community Store herunterladen & mit Ihrem Token aktivieren.

Zum Community Store

2. 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

Ohne die CORS-Eintragungen im Partnerportal kann die Integration nicht geladen werden.

Copied to clipboard!

   
   
<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" charset="UTF-8" type="text/javascript"></script>

3. Parameterbeschreibung

Konfiguration

Name
Beschreibung
Required
Validierung/ Optionen
token
Authentifizierung
true
string
is_test
Einstellung für live oder test Umgebung
true
boolean

Kundendaten

Name
Beschreibung
Required
Validierung/ Optionen
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
hause_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

4. Alternative Einbindung

Für eine Clientseitige Befüllung der Parameter kann folgendes Snippet verwendet werden.

Copied to clipboard!

   
   
<div id="loopingo-integration-container"> <script id="loopingo-props" type="text/props"></script> </div>
Copied to clipboard!

   
   
// 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);

5. 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.

Copied to clipboard!

   
// Initialise API
window.loopingo_data = window.loopingo_data || [];
window.loopingoCall = window.loopingoCall || function() { 
loopingo_data.push(arguments); };
   
 

Nun kann mit der Integration interagiert werden:

Copied to clipboard!

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

6. Installation mit Vue.js

loopingo_integration.component.vue

Copied to clipboard!

   
   <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

Copied to clipboard!

   
    <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>