Die Onlinereservierung kann in einem Iframe eingebunden werden.


Dazu gehören zwei Komponenten:

1. Das Iframe-Tag

2. Das JavaScript, um die Parent-Seite an den sich ändernden Inhalt im Iframe anzupassen.


Im Folgenden ist ein komplettes Beispiel für eine Seite mit Iframe zu sehen. Der Platzhalter "subdomain" muss dabei durch den korrekten ROType ersetzt werden.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Onlinereservierung Iframe-Test</title>

<!-- Resizer iFrame -->
<script type="text/javascript">
    var receiveMessage = function (event) {
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            maxWidth = w.innerWidth || e.clientWidth || g.clientWidth,
            maxHeight = w.innerHeight || e.clientHeight || g.clientHeight;

        if (event.data) {
            var message = event.data;

            // die Seite im Iframe schickt eine Nachricht mit dem Inhalt 'stateChanged'
            if (message === 'stateChanged') {
                // mit diesem Aufruf scrollt der Browser nach einem
                // Seitenwechsel im Iframe nach ganz oben
                window.scrollTo(0, 0);
                return;
            }

            // Tracking
            if (typeof message === 'object' && message.event && message.rent) 
            {
              // Hier kann zB. der Aufruf vom Google Tag Manager stehen
              console.log('Tracking-Message vom Iframe erhalten: ' + JSON.stringify(message));
              return;
            }

            // hier wird die Nachricht für das Resizing des IFrames behandelt
            if (typeof message === 'string') {
                var messageSplit = message.split(':');
                if (messageSplit.length > 1) {
                    var eventName = messageSplit[0];
                    var iframes, len, i = 0;

                    // only receive messages from these domains
                    var senderDomains = ['https://subdomain.rentoffice.de'];

                    if (senderDomains.indexOf(event.origin) !== -1 && eventName === 'resize') {
                        iframes = document.getElementsByTagName('iframe');
                        len = iframes.length;
                        // wir gehen durch alle IFrames auf der Seite
                        for (i = 0; i < len; i++) {
                            // ist der aktuelle IFrame die Quelle der Nachricht?
                            if ((iframes[i].contentWindow || iframes[i].documentWindow) == event.source) {
                                // Höhe des IFrames anpassen
                                iframes[i].style.height = messageSplit[1] + "px";
                                var rect = iframes[i].getBoundingClientRect();
                                if (messageSplit.length > 2) {
                                    // ggf. auch die Breite des IFrames anpassen
                                    iframes[i].style.width = Math.min(maxWidth - rect.left - 10, messageSplit[2]) + "px";
                                }
                                return;
                            }
                        }
                    }
                }
            }
        }
    };

if (window.addEventListener) {
    window.addEventListener('message', receiveMessage, false);
}
else if (window.attachEvent) {
    window.attachEvent('onmessage', receiveMessage);
}

</script>
<!-- Ende Resizer iFrame -->
</head>
<body style="max-width:1400px; margin:0 auto;">
    <div style="background-color:#808080; width:100%; height:150px;"></div>
    <div style="width:100%; min-height:800px; margin: 0 auto; position:relative; ">
        <div style="position:relative; left:100px; top:10px;">
            <iframe id="onlinereservation_iframe" src="https://subdomain.rentoffice.de" width="304" height="415" name="onlinereservation_iframe" frameborder="0" border="0" style="border:0px;" scrolling="no"></iframe>
        </div>
    </div>
    <div style="background-color:#808080; width:100%; height:100px;"></div>
</body>
</html>

Tracking mit Tools, die in der Parent-Seite eingebunden sind (z.B. Google Tag Manager)


Um das Tracking auf der Parent-Seite zu unterstützen, werden Nachrichten per PostMessage an die parent-Seite geschickt. 

Die Objekt-Struktur der Nachrichten ist nun folgendermaßen:

 

Beim Page-Load (Beispiele von den ersten vier Seiten):


// Seite 1
{"event":"rent_pageview","rent":{"url":"https://subdomain.rentoffice.de/","step":"station_selection"}}

// Seite 2
{"event":"rent_pageview","rent":{"url":"https://subdomain.rentoffice.de/","step":"group_selection","days":1,"distance":0,"dealer":"Station Berlin"}}

// Seite 3
{"event":"rent_pageview","rent":{"url":"https://subdomain.rentoffice.de/","step":"extras_selection"}}

// Seite 4
{"event":"rent_pageview","rent":{"url":"https://subdomain.rentoffice.de/","step":"summary_before_booking"}}


Beim Absenden der Buchung:


{"event":"rent_booking","rent":{"url":"https://subdomain.rentoffice.de/","step":"confirmation","price":4,"days":1,"dealer":"Station Berlin","transactionId":"<some_id_string>"}}