{"id":2342,"date":"2025-06-12T15:48:38","date_gmt":"2025-06-12T13:48:38","guid":{"rendered":"https:\/\/upendo.com\/?post_type=macros_pt&#038;p=2342"},"modified":"2025-06-12T16:08:22","modified_gmt":"2025-06-12T14:08:22","slug":"deel-waarde-door-getal","status":"publish","type":"macros_pt","link":"https:\/\/upendo.com\/nl\/macros\/deel-waarde-door-getal","title":{"rendered":"Tijd doorgebracht op pagina"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Deze aangepaste JavaScript-variabele berekent de tijd die een gebruiker op een bepaalde pagina heeft doorgebracht. Dit wordt gedaan door de tijd te registreren wanneer een pagina voor het eerst wordt geladen en vervolgens de tijd opnieuw te registreren wanneer de gebruiker van de pagina wegnavigeert of het venster sluit. Het verschil tussen deze twee tijden is de tijd die op de pagina is doorgebracht.  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"usecase\">Usecase<\/h2>\n\n<p class=\"wp-block-paragraph\">De \u201cTijd doorgebracht op pagina\u201d kan inzicht geven in de betrokkenheid van gebruikers. Door te weten hoe lang een gebruiker op een bepaalde pagina blijft, kun je begrijpen of ze de inhoud op de pagina nuttig of interessant vinden. Als gebruikers bijvoorbeeld consequent veel tijd doorbrengen op een bepaalde pagina, kan dat erop wijzen dat de inhoud waardevol voor ze is. Omgekeerd, als gebruikers een pagina vaak snel verlaten, kan dat erop wijzen dat ze niet vinden wat ze zoeken.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"instructions\">Instructies<\/h2>\n\n<p class=\"wp-block-paragraph\">Om dit te implementeren moet je de Session Storage of Local Storage van de webbrowser gebruiken. Dit voorbeeld gebruikt Session Storage: <\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(201, 218, 248, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#39404f;color:#c8d0e0\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>functie() {\n  \/\/ Controleer of \u201cstarttijd\u201d bestaat in Sessieopslag\n  if (sessionStorage.getItem(\u201cstart_time\u201d)) {\n  \/\/ De huidige tijd ophalen\n  var eind_tijd = nieuwe Datum().getTijd();\n  \/\/ De starttijd ophalen uit de sessieopslag\n  var start_time = sessionStorage.getItem(\u201cstart_time\u201d);\n  \/\/ Bereken de tijd die op de pagina is doorgebracht in seconden\n  var time_spent = (eind_tijd &#8211; begin_tijd) \/ 1000;\n  \/\/ Wis de starttijd uit de sessieopslag\n  sessionStorage.removeItem(\u201cstart_time\u201d);\n  \/\/ Geef de tijd terug die op de pagina is doorgebracht\n  geef de bestede tijd terug;\n  } anders {\n  \/\/ Als \u201cstarttijd\u201d niet bestaat in Session Storage, maak het dan aan\n  var start_time = nieuwe Datum().getTime();\n  sessionStorage.setItem(\u201cstart_time\u201d, start_time);\n  \/\/ Geen gegevens teruggeven omdat de gebruiker de pagina zojuist heeft geladen\n  stuur niets terug;\n  }\n}<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">    <\/span><span style=\"color: #616E88\">\/\/ Check if 'start time' exists in Session Storage<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">sessionStorage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getItem<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">start_time<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Get the current time<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">end_time<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Date<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getTime<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Retrieve the start time from Session Storage<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">start_time<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">sessionStorage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getItem<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">start_time<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Calculate the time spent on page in seconds<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">time_spent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">end_time<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">start_time<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1000<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Clear the start time from Session Storage<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">sessionStorage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">removeItem<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">start_time<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Return the time spent on page<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">time_spent<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ If 'start time' doesn't exist in Session Storage, create it<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">start_time<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Date<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getTime<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">sessionStorage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setItem<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">start_time<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">start_time<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Return null since the user has just loaded the page<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">null;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\">Deze JavaScript-functie slaat de tijd dat de gebruiker de pagina voor het eerst laadt op in Session Storage. Wanneer de gebruiker van de pagina wegnavigeert, berekent de functie het verschil tussen de huidige tijd en de opgeslagen starttijd, wat de tijd geeft die op de pagina is doorgebracht. Als er geen starttijd in Session Storage is (d.w.z. als de gebruiker de pagina net heeft geladen), maakt de functie er een en retourneert nul.  <\/p>\n\n<p class=\"wp-block-paragraph\"><strong>Merk op dat deze functie twee keer moet worden geactiveerd &#8211; \u00e9\u00e9n keer als de pagina wordt geladen en \u00e9\u00e9n keer als de gebruiker wegnavigeert. Je zou een Page View trigger kunnen maken voor het laden van de pagina en een History Change of Page Unload trigger voor wanneer de gebruiker de pagina verlaat. <\/strong>  Wees je er ook van bewust dat de Sessieopslag wordt gewist wanneer de gebruiker de browser sluit, dus het is mogelijk dat deze methode de tijd die is besteed aan meerdere browsersessies niet nauwkeurig bijhoudt.<\/p>\n\n<p class=\"wp-block-paragraph\"><em>Is dit niet de macro die je zocht? Bekijk hieronder verwante macro&#8217;s of <a href=\"https:\/\/upendo.com\/contact\">vraag er een aan<\/a>. <\/em><br\/><\/p>\n","protected":false},"author":2,"featured_media":0,"template":"","type_macros_pt":[47],"tag_macros_pt":[46],"level_macros_pt":[45],"class_list":["post-2342","macros_pt","type-macros_pt","status-publish","hentry","type_macros_pt-gegevensmanipulatie","tag_macros_pt-array-nl","level_macros_pt-intermediair"],"acf":[],"_links":{"self":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/macros_pt\/2342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/macros_pt"}],"about":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/types\/macros_pt"}],"author":[{"embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/users\/2"}],"wp:attachment":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/media?parent=2342"}],"wp:term":[{"taxonomy":"type_macros_pt","embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/type_macros_pt?post=2342"},{"taxonomy":"tag_macros_pt","embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/tag_macros_pt?post=2342"},{"taxonomy":"level_macros_pt","embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/level_macros_pt?post=2342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}