login  Naam:   Wachtwoord: 
Registreer je!
 Forum

one page (SPA) analytics ga('send', 'pageview', '/about')

Offline onepage - 22/05/2016 13:19 (laatste wijziging 16/06/2016 17:20)
Avatar van onepageNieuw lid Hi,

Ik heb een onepage pagina en heb standaard analytics goed werken. Echter is mijn bouche rate erg hoog doordat er maar 1 pagina is. en weet je eigenlijk niet wat de gebruiker ziet of tot hoe ver de gebruiker komt. Ik las op internet dat je een code kunt gebruiken om dit te verhelpen:
ga('send', 'pageview', ‘/about')
https://develop..._pageviews
Hier ook nog een website die goed beschrijft wat ik wil:
[url]https://www.macaw.nl/weblog/2013/10/google-analytics-op-een-single-page-application [/url]

Ik heb het geprobeerd, maar werkte bij mij niet. Ik heb verschillende manieren geprobeerd maar het werkte niet. oa op deze manier...
onscroll="ga('send', 'pageview', ‘/about’)"

dit is de code van het stukje /about op mijn onepager:
###############

<div id=“about" class="animate-block content-block news-block">

<div class="news-block-inner container">

<div class="content-block-inner text-center">

<h2>About me</h2>

<div class="col-10-desktop no-float center-element">

<p>

###############

Waar moet ik de code plaatsen en is de code die ik gebruik juist?
Zou iemand mij kunnen helpen en het stukje hierboven kunnen voorzien van de juiste cade om /about te weergeven in analytics.

Alvast bedankt!
OnePager
[u]

5 antwoorden

Gesponsorde links
Offline Thomas - 22/05/2016 14:03
Avatar van Thomas Moderator De code die je gebruikt volgt niet de vorm die wordt beschreven in het eerste artikel.

Daar staat:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // stel handmatig virtuele pagina in (update de tracker)
  2. ga('set', 'page', '/about');
  3. // registreer een hit
  4. ga('send', 'pageview');


De manier waarop jij send() aanroept klopt volgens mij ook niet. Je probeert twee stappen op een verkeerde manier te combineren.

Volg eerst de instructies eens goed en kijk dan of het werkt zoals je wilt.
Offline onepage - 22/05/2016 15:21
Avatar van onepage Nieuw lid Okay... 

Maar heb al heel veel combies geprobeerd en beschrijvingen gelezen en helaas nog niet gelukt. Daarom deze post...
Als ik het in de HTML code zou moeten schrijven zet ik het als volgt neer. Dit omdat je in dezelfde DIV ook een animatie aanroept die pas geladen wordt als het in het zicht is. Ook heb ik het met onscroll= geprobeerd. Voor jou is mijn fout misschien heel eenvoudig te verklaren, maar ik snap niet dat de virtuele pageview niet doorkomt... 

<div id=“about" class="animate-block content-block news-block" ga('set', 'page', '/new-page.html'); ga('send', 'pageview');>
<div class="news-block-inner container">
<div class="content-block-inner text-center">
<h2>About me</h2>
<div class="col-10-desktop no-float center-element">
<p>

of

<div id=“about" class="animate-block content-block news-block" onscroll="ga('set', 'page', '/new-page.html');" onscroll="ga('send', 'pageview');">
<div class="news-block-inner container">
<div class="content-block-inner text-center">
<h2>About me</h2>
<div class="col-10-desktop no-float center-element">
<p>

of

<div id=“about" class="animate-block content-block news-block" onscroll="ga('send', 'pageview', ‘/about’)">
<div class="news-block-inner container">
<div class="content-block-inner text-center">
<h2>About me</h2>
<div class="col-10-desktop no-float center-element">
<p>

of

<div id=“about" class="animate-block content-block news-block">
<script>onscroll="
ga('set', 'page', '/new-page.html');
ga('send', 'pageview');
"</script>
<div class="news-block-inner container">
<div class="content-block-inner text-center">
<h2>About me</h2>
<div class="col-10-desktop no-float center-element">
<p>
Offline Thomas - 22/05/2016 16:05 (laatste wijziging 25/05/2016 15:01)
Avatar van Thomas Moderator Euh, er zal op een of andere manier een event getriggerd moeten worden op het moment dat een bepaald stuk content op je scherm zichtbaar is. Hier koppel je dan vervolgens de set + send commando's aan. "onscroll" vertelt je niet zoveel omdat dit je niet vertelt wat iemand op enig moment ziet. Daarnaast bombardeer je daarmee (onscroll) waarschijnlijk GA ook met set+send data op het moment dat je aan het scrollen bent.

Stap 1 is dus een methode voor detectie (in JavaScript) wat er op enig moment op het scherm zichtbaar is (of liever gezegd, wanneer dit verandert). Een van de manieren is het dynamisch aanpassen van de #hashtag in de URL, dit event kan vervolgens gevangen worden in jQuery middels:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(window).on('hashchange', function() {
  2.     // ...
  3. });

Dit is trouwens wat ongeveer (precies?) gebeurt op de Google pagina: je scrollt door het artikel heen en de hash + de navigatie verandert. Aan deze events zou je je pagehits registratie kunnen hangen.

Rest ons nog een manier om dynamisch de hash te veranderen wanneer je door een pagina scrollt.

Dat principe wordt hier beschreven.

Wat je exact wilt doorgeven aan GA kan in principe afwijken van het id van de hashtag. Deze informatie zou je dan bijvoorbeeld uit een data-attribuut kunnen halen maar dat zijn implementatiedetails.

Met het bovenstaande heb je dus een "plan" om te bereiken wat je wilt. Probeer het eens uit.

---

EDIT: voor de geinteresseerden hieronder een oplossing:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!--
  2. http://www.sitemasters.be/forum/11/41546/HTML_&_CSS/one_page_%28SPA%29_analytics_ga%28send,_pageview,_%E2%80%98_about%29_
  3.  
  4. further reading:
  5. http://stackoverflow.com/questions/5315659/jquery-change-hash-while-scrolling-down-page
  6.  
  7. Notification from FireFox console:
  8. This site appears to use a scroll-linked positioning effect.
  9. This may not work well with asynchronous panning;
  10. see https://developers.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects
  11. for further details and to join the discussion on related tools and features!
  12.  
  13. Some good ideas:
  14. http://stackoverflow.com/questions/3870057/how-can-i-update-window-location-hash-without-jumping-the-document
  15.  
  16. http://stackoverflow.com/questions/5129386/how-to-detect-when-history-pushstate-and-history-replacestate-are-used
  17. http://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate
  18. http://stackoverflow.com/questions/13098988/trigger-window-scroll
  19. -->
  20. <!DOCTYPE html>
  23. <meta charset="UTF-8">
  24. <title>hashtag change</title>
  25. <!-- add jquery, consider using a local copy instead of relying on a CDN -->
  26. <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
  27. <!-- some markup -->
  28. <style type="text/css">
  29. body                { margin: 0; font-family: sans-serif; font-size: 12pt; }
  30. h1                  { margin: 0; }
  31. section#home        { background-color: #ccccff; }
  32. section#about       { background-color: #ccffcc; }
  33. section#portfolio   { background-color: #ffcccc; }
  34. section#contact     { background-color: #ffffcc; }
  36. </head>
  37.  
  39. <!-- split the various parts up in sections, identified by an id -->
  40. <div>
  41.     <section id="home">
  42.         <h1>home</h1>
  43.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  44.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  45.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  46.     </section>
  47.  
  48.     <section id="about">
  49.         <h1>about</h1>
  50.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  51.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  52.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  53.     </section>
  54.  
  55.     <section id="portfolio">
  56.         <h1>portfolio</h1>
  57.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  58.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  59.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  60.     </section>
  61.  
  62.     <!-- in order to detect scrolling into this last section MAKE SURE this section has an appropriate -->
  63.     <!-- minimal height or add a footer bumper that has sufficient size (may depend on screen size) -->
  64.     <section id="contact">
  65.         <h1>contact</h1>
  66.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  67.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  68.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  69.     </section>
  70. </div>
  71. <script type="text/javascript">
  72. //<![CDATA[
  73. $().ready(function() {
  74.     // calculate offsets and height of sections so we don't have to query the DOM while scrolling...
  75.     // @todo recalculate when someone resizes the page
  76.     var sections = []; // id => [top, bottom]
  77.     $('section').each(function() {
  78.         sections[$(this).attr('id')] = [
  79.             $(this).offset().top,
  80.             $(this).offset().top + $(this).height() - 1
  81.         ];
  82.     });
  83.  
  84.     // keep track of current hash so we don't register a section hit when we are already in that section
  85.     var currentHash = '';
  86.  
  87.     $(window).scroll(function() {
  88.         currentTop = $(document).scrollTop();
  89.         for (id in sections) {
  90.             if (
  91.                 sections[id][0] < currentTop + 50 // add a suitable margin
  92.                 &&
  93.                 sections[id][1] > currentTop + 50 // add a suitable margin
  94.             ) {
  95.                 if (id != currentHash) {
  96.                     // pushState vs replaceState? pushState keeps a history, replaceState does not
  97.                     // unfortunately, does not seem to trigger hashchange event... but, we don't need that
  98.                     // since we are setting the hash ourselves, so we know when it occurs
  99.                     if (history.replaceState) {
  100.                         history.replaceState(null, null, '#'+id);
  101.                     } else {
  102.                         location.hash = '#!'+id; // add ! to prevent jumping (and being unable to scroll)
  103.                     }
  104.                     currentHash = id;
  105.                     // *** this is where you would insert hit registration ***
  106.                 }
  107.                 break; // we are done
  108.             }
  109.         }
  110.     });
  111.  
  112.     // we do not even need this event, because we know when we update the hash
  113.     // this event tracking also bogs down the browser so leave it out
  114.     /*
  115.     $(window).on('hashchange', function() {
  116.         hash =  window.location.hash.replace(/^#!?/, '');
  117.         console.log('hash changed to '+hash);
  118.     });
  119.     */
  120.  
  121.     // scroll to default hash, triggering the scroll function (and hit registration) below
  122.     // location.hash = '#home';
  123.     // actually, trigger scroll event, because we are not actually scrolling in this layout
  124.     // (the first section starts right at the top)
  125.     $(window).scroll();
  126. });
  127. //]]>
  129. </body>
  130. </html>
Offline Shiga - 16/06/2016 14:00
Avatar van Shiga Nieuw lid Moderators graag de titel aanpassen!
Dit zorgt ervoor dat de RSS feed corrupt raakt.

www.sitemasters.be/rss/xml/forum.xml
Bedankt door: Thomas
Offline Thomas - 16/06/2016 14:14 (laatste wijziging 16/06/2016 19:40)
Avatar van Thomas Moderator Oh lol.

Bedankt voor het melden.

Dit lijkt mij overigens iets wat in de feed-functionaliteit opgelost zou moeten worden, we zullen dit oppakken.

Actually, fk that, voor nu een quickfix.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.197s