Postmessages gebruiken voor Google Analytics

Postmessages gebruiken voor Google Analytics

De nieuwe publieke module ondersteunt Google Analytics niet door toevoegen van scripts en/of tags. In plaats daarvan kan de publieke module op bepaalde momenten (zoals bijvoorbeeld het klikken op de knop “Boek nu” of “Meer informatie”) een bericht sturen naar de pagina van je website waarop het i-frame zich bevindt.
Net als bij de afmetingen van de publieke module betreft het hier een zogenaamde. “postMessage”.
De inhoud van deze berichten bevat, afhankelijk van het punt waarop het bericht werd verstuurd, o.a. de naam van de accommodatie en de geselecteerde periode.
Ook hiervoor dient je websitebouwer een stukje Javascript code op te nemen in de webpagina om te “luisteren” naar deze berichten. Bij het ontvangen van zo’n bericht kan je websitebouwer er bijvoorbeeld voor zorgen dat op basis van de inhoud e.e.a. worden doorgegeven aan Google Analytics.

De inhoud van zo’n bericht ziet er als volgt uit :
{"Action":"MoreInformation","BookingNumber":0,"BookingStart":"2021-04-02T00:00:00+02:00","BookingEnd":"2021-04-02T00:00:00+02:00","AccommodationName":"Alma Huis","AccommodationId":14129,"Price":0.0,"Language":"nl-NL"}

{"Action":"BookNow","BookingNumber":0,"BookingStart":"2021-04-02T00:00:00","BookingEnd":"2021-04-06T00:00:00","AccommodationName":"Alpaca","AccommodationId":15293,"Price":260.0,"Language":"nl-NL"}

{"Action":"SaveBooking","BookingNumber":10276,"BookingStart":"2021-04-02T00:00:00","BookingEnd":"2021-04-06T00:00:00","AccommodationName":"Alpaca","AccommodationId":15293,"Price":260.0,"Language":"nl-NL"}


Of alle waardes in dat bericht zijn gevuld en hoe ze zijn gevuld hangt af van de actie die zorgde dat het bericht werd verstuurd.
Zo zal bijvoorbeeld na het klikken op “Terug naar zoekresultaten” de inhoud uiteraard geen waardes hebben bij o.a. “BookingNumber” en “AccommodationName”.
 

Voorbeeld Javascript t.b.v. postMessages

Onderstaand een simpel stukje Javascript als voorbeeld hoe geluisterd kan worden naar postMessages.
  1. <html>
  2. <head>
  3.     <meta charset="utf-8" />
  4.     <title></title>
  5.     <script>
  6.         window.addEventListener("message", receiveMessage, false);

  8.         function receiveMessage(event) {
  9.             if (event.origin !== "https://public2.reflexholiday.nl") {
  10.                 return;
  11.             }

  13.             try {
  14.                var data = JSON.parse(event.data);

  16.                 if (data) {
  17.                     if (data.Action == "sizeChanged") {
  18.                         document.getElementById('publicframe').style.height = data.PublicSize.height + 'px';
  19.                     }
  20.                     else {
  21.                        
  22.                         if (data.Action == "MoreInformation") {
  23.                             // Client click on the More information button of an accommodation
  24.                             console.log("Reserveringsnummer = " + data.BookingNumber);
  25.                             console.log("AccommodatieID = " + data.AccommodationId);
  26.                             console.log("Accommodatie Naam = " + data.AccommodationName);
  27.                             console.log("Startdatum = " + data.BookingStart);
  28.                             console.log("Einddatum = " + data.BookingEnd);
  29.                             console.log("Prijs = " + data.Price);
  30.                             console.log("Taal = " + data.Language);
  31.                         }

  33.                         if (data.Action == "BookNow") {
  34.                             // First Booking page
  35.                             console.log("Reserveringsnummer = " + data.BookingNumber);
  36.                             console.log("AccommodatieID = " + data.AccommodationId);
  37.                             console.log("Accommodatie Naam = " + data.AccommodationName);
  38.                             console.log("Startdatum = " + data.BookingStart);
  39.                             console.log("Einddatum = " + data.BookingEnd);
  40.                             console.log("Prijs = " + data.Price);
  41.                             console.log("Taal = " + data.Language);
  42.                         }

  44.                         if (data.Action == "NextStep") {
  45.                             // Second and Third Booking page
  46.                             console.log("Reserveringsnummer = " + data.BookingNumber);
  47.                             console.log("AccommodatieID = " + data.AccommodationId);
  48.                             console.log("Accommodatie Naam = " + data.AccommodationName);
  49.                             console.log("Startdatum = " + data.BookingStart);
  50.                             console.log("Einddatum = " + data.BookingEnd);
  51.                             console.log("Prijs = " + data.Price);
  52.                             console.log("Taal = " + data.Language);
  53.                         }

  55.                         if (data.Action == "SaveBooking") {
  56.                             // Booking is saved
  57.                             console.log("Reserveringsnummer = " + data.BookingNumber);
  58.                             console.log("AccommodatieID = " + data.AccommodationId);
  59.                             console.log("Accommodatie Naam = " + data.AccommodationName);
  60.                             console.log("Startdatum = " + data.BookingStart);
  61.                             console.log("Einddatum = " + data.BookingEnd);
  62.                             console.log("Prijs = " + data.Price);
  63.                             console.log("Taal = " + data.Language);
  64.                         }

  66.                     }
  67.                 }
  68.             }
  69.             catch (ex) { }
  70.             }
  71.     </script>

  73. </head>
  74. <body>
  75.     <iframe id="publicframe" width="100%" frameborder="0" allowtransparency="true" src="https://public2.reflexholiday.nl/OnlineBooking/Search/Search.aspx?relation=aFQBsHihiNY%3d&languageid=1&locationid=0&searchmode=1" title="Boek hier uw accommodatie">
  76.     </iframe>
  77. </body>
  78. </html>

Meer (technische) informatie omtrent postMessages is o.a. te vinden op https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage


    • Related Articles

    • Machtiging voor automatische betaling

      Voor het instellen van de automatische incasso voor de eenmalige en / of de maandelijkse gebruikslicentiekosten, vragen wij je om gebruik te maken van ons online incassoformulier. Klik hier voor het afgeven van een machtiging

    • Checklist voor basisinrichting

      Systeem instellingen Relatie instellingen   Statussen Statussen instellen   Financiële instellingen Annuleerbeleid Betalingsvormen - bv. Bank, Kas, Buckaroo, etc aanmaken   Systeem documenten Emails toevoegen   Gebruikers Ga naar ...

    • Emailsjabloon instellen voor Huiseigenaar

      De eigenaar kan een CC email ontvangen van de communicatie met de klant. Het is mogelijk om voor de eigenaar een eigen email sjabloon aan te maken. En ook aan te geven bij welke status de eigenaar een email moet ontvangen – dus niet bij alle ...

    • Stappenplan afrekening maken voor huiseigenaar

      Stap 1 : Een account aanmaken voor de eigenaar ( Gedetailleerde toelichting ) •Klik in het keuzemenu Gebruikers. •Voor elke eigenaar moet u een gebruikersaccount aanmaken.     Stap 2 : Alle mogelijke provisie typen definiëren ( Gedetailleerde ...

    • Offerte - Klantportaal voor uw gasten

      Klik hier voor het aanvragen van een online offerte Gasten willen snel en veilig (deel)betalingen verrichten, informatie over een reservering opvragen en hun gegevens aanvullen. Het voornaamste doel van een MyBooking klantportaal  is het bieden van ...