Actuele weerdata als personalisatie filter gebruiken

Veel merchants hebben producten of productlijnen die bij specifieke weeromstandigheden vaker verkocht worden. Bijvoorbeeld een BBQ als de zon schijnt, of winterkledij als het koud is. Je kan daarom de producten die je toont afstemmen op de huidige weersomstandigheden!

Verschillende partijen zoals KNMI en Buienrader bieden namelijk gestructureerde data aan met daarin metingen (die elke 10 minuten geüpdatet worden!) van de temperatuur, regen, en andere eigenschappen. Die kan je via Squeezely uitlezen en zo voor verschillende scenario’s de relevante producten tonen. Let wel op dat je hiervoor al wel in je productdata eigenschappen (categorieën, custom velden, ..) aanwezig moet hebben waardoor je onderscheid kan maken. Het meest optimale is een overkoepelend veld, dus bijvoorbeeld “seizoen: winter” maar anders kan je meestal wel met huidige data aan de slag, bijvoorbeeld categorieën “winterjas, muts, handschoenen” etc.

Voor het uitlezen van de real-time weerdata bieden we voor Buienrader een op maat geschreven code aan, waarbij je zelf slechts twee waarden moet wijzigen: je kiest een van de 50 beschikbaar meetstations, en vervolgens een of meerdere attributen (zoals temperatur) waar je op wenst te filteren.

Weerstation en attributen bepalen

We maken gebruik van Buienradar’s JSON data, die is snel uit te lezen en bevat veel, haast real-time data:

https://data.buienradar.nl/2.0/feed/json

Om bovenstaand leesbaar te maken in je browser, kan je een JSON viewer zoals https://codebeautify.org/jsonviewer gebruiken. Dan zie je bij actual => stationmeasurements de volgende beschikbare stations:

Arnhem, Berkhout, Cadzand, De Bilt, Den Helder, Eindhoven, Ell, Euro platform, Gilze Rijen, Goes, Groenlo-Hupsel, Groningen, Hansweert, Heino, Herwijnen, Hoek van Holland, Hoogeveen, Hoorn Terschelling, Houtribdijk, Huibertgat, IJmond, IJmuiden, Lauwersoog, LE Goeree, Leeuwarden, Lelystad, Lopik-Cabauw, Maastricht, Marknesse, Nieuw Beerta, Oosterschelde, Rotterdam, Rotterdam Geulhaven, Schaar, Schiphol, Stavenisse, Stavoren, Texelhors, Tholen, Twente, Vlakte aan de Raan, Vlieland, Vlissingen, Volkel, Voorschoten, Westdorpe, Wijdenes, Wijk aan Zee, Woensdrecht, Zeeplatform F-3

De naam in de data zelf begint altijd met “Meetstation “, dus de daadwerkijke locatie is bijvoorbeeld “Meetstation Arnhem”

Vervolgens kies je de eigenschappen uit waarop je in Squeezely mogelijk gaat filteren, voor ieder station zijn dit de opties:

stationid, stationname, lat, lon, regio, timestamp, weatherdescription, iconurl, graphUrl, winddirection, temperature, groundtemperature, feeltemperature, windgusts, windspeed, windspeedBft, humidity, precipitation, sunpower, winddirectiondegrees

Bij onderstaand script kan je het gewenste meetstation en attributen wijzigen in de eerste lijnen, bij de attributen kan je er meerdere selecteren die dan bij eenzelfde event verschijnen.

Script met weerdata afvuren

Via Google Tag Manager

Dit is de meest eenvoudige optie, je maakt een custom HTML tag aan en kopieert onderstaande waarbij je alleen lijn 2 en 3 moet wijzigen indien gewenst. Dit verstuurt een event genaamd WeatherUpdate met daarin de door jouw gekozen attributen. Het is aan te raden dit event / de tag zo specifiek mogelijk af te vuren.

<script>
var stationLocation = "Meetstation De Bilt";
var attributes = ["rainFallLast24Hour", "temperature", "weatherdescription"];
fetch('https://data.buienradar.nl/2.0/feed/json').then(function (response) {
  return response.json();
}).then(function (json) {
  return getWeatherData(json);
});

function getWeatherData(wjson) {
  var stations = wjson.actual.stationmeasurements;
  var stationData = stations.find(function (station) {
    return station.stationname == stationLocation;
  });

  if (stationData) {
    var sqEvent = {};
    sqEvent.event = "WeatherUpdate";
    attributes.forEach(function (weatherattribute) {
      if (stationData[weatherattribute] !== undefined) {
        var sqAttribute = "custom_" + weatherattribute.toLowerCase();
        sqEvent[sqAttribute] = stationData[weatherattribute];
      }
    });

    window._sqzl.push(sqEvent);
  }
}
</script>

Via Squeezely personalisatie

Dit biedt de mogelijkheid gebruik te maken van onze geo locatie filter: zo kan je de personalisaties nog dynamischer maken, bijvoorbeeld door Nederland in een aantal regio’s op te splitsen. Je personalisatie zal nog wel renderen, dus verbeg deze adhv volgende CSS:

{{cssPrefix}} {
display: none !important;
}

Als de personalisatie niet kan renderen, voeren we de Javascript ook niet uit. Je moet dus een werkende queryselector selecteren.

Wijzig hier lijn 1 en 2 naar eigen voorkeur:

let stationLocation = "Meetstation De Bilt";
let attributes = ["rainFallLast24Hour", "temperature", "weatherdescription"];

fetch('https://data.buienradar.nl/2.0/feed/json')
    .then((response) => response.json())
    .then((json) => getWeatherData(json));

function getWeatherData(wjson) {
    let stations = wjson.actual.stationmeasurements;
    let stationData = stations.find(station => station.stationname == stationLocation);
    if (stationData) {
        let sqEvent = {};
        sqEvent.event = "WeatherUpdate";
        attributes.forEach((weatherattribute) => {
            if (stationData[weatherattribute] !== undefined) {
                let sqAttribute = "custom_" + weatherattribute.toLowerCase();
                sqEvent[sqAttribute] = stationData[weatherattribute];
            }
        });
        window._sqzl.push(sqEvent);  }
}

Eventvelden en personalisatie voorwaarden aanmaken

Je kan bij het data overzicht zien hoe de weerdata binnenkomt:

Om deze daadwerkelijk te gebruiken in onze interface, moet je dit veld nog wel aanmaken. Vermits het geen profieldata betreft, kan je het veld als volgt aanmaken, waarbij je bij temperatuur en neerslag een numeriek veld kiest:

Dan heb je alle benodigde data ter beschikking, en kan je deze als filter toepassen. Bijvoorbeeld:

Deze personalisatie zal alleen tonen wanneer de temperatuur voor het gekozen weerstation in de afgelopen tien minuten meer dan 15 graden is!