Implement detailed analytics

[iteles]

As a dwyl site owner, I want to collect data on usage of my website so that I can target the content to those people.

• Determine which metrics we want to track
  • What keywords people are searching for to get to my website so that I can target content for those keywords
  • How far people scroll down the page
• Implement GA - https://github.com/dwyl/learn-google-analytics
• Implement GTM

[nelsonic]

Increased priority as we need to start making decisions based on the data/insight from this. 👍

[harrygfox]

Navigation Menu

Track user Clicks on MENU ITEMS

• What was the user's URL at the time they clicked?
• What did they click on?
• What happened next - did they bounce? did they go somewhere else?

[harrygfox]

Services Page

• The goal here is to engage potential clients with relevant content and convert that engagement into submission of an email address.

Potential Barriers

• Unconvincing content
  • METRIC did they click on a case study and then leave?
  • METRIC did they scroll to the bottom and then leave?
• Form Abandonment
  • METRIC did they enter fields into the form and not complete it?
  • METRIC did they click contact link but did not complete contact form?

[iteles]

@Cleop Based on your research and conversations with @Danwhy, please split this issue out into chunks that you can explain and estimate so as to capture the information you have already gathered, even if we don't get around to completing everything.

• Clicks to navigation items should be the highest priority and I suspect the simplest to implement
• Scrolling and understanding where on the page people leave would be my next priority (form abandonement is also very useful but we can deduce an elementary metric of this based on navigation item clicks and the number of emails we get)

[Cleop]

• where submitting contact form
• navigation links - which ones are people are people clicking on, from where.
• how far down are people scrolling, at what point are people coming off the page?

[Cleop]

@iteles - how do you think I should test my tag manager/ analytics work? Currently both are hooked up to dwyl.com but the redesign is set up on: dwyl.github.io/dwyl-site. dwyl.com doesn't have the tag manager scripts in.

I could redirect the tag manager stuff to the gh pages site for now but I don't want to lose the previous/live data from the existing site for google analytics. Do you think setting up another google analytics account for the gh pages site and redirecting tag manager would be best? Or I could pop the tag manager script on the existing site? Or another alternative?

[iteles]

@Cleop Whichever you think makes the most sense. Happy for you to set up a test GA account for now which we then swap over to the one we want to use, but only if that's not very complex!

[ZooeyMiller]

@finnhodgkin and I have looked into setting up analytics for which navigation link was clicked, and from which page, and this will be straightforward once we have access to the correct tag manager account.

We've done this on my own tag manager account with github pages just because it's what we have access to. We're now going to look into the analytics with tag manager to explore scrolling.

[ZooeyMiller]

We've been working on a code block for a tag in GTM to register a users' maximum scroll height, and send the maximum scroll height when they leave the page. We have had a chance to test it with GTM yet but we've played with everything bar the pushing of the datalayer in the browser console, and it all works as expected.

  <script>
  var scrollHeight = 0
  window.addEventListener("scroll", (e) => {
    if(window.pageYOffset > scrollHeight) {
      scrollHeight = window.pageYOffset;
    }
  })

  var scrollableHeight = document.body.scrollHeight - window.innerHeight
  
  window.addEventListener("beforeunload", () => {
     dataLayer.push({'event':'scrollTracking','scrollDepth': (scrollHeight / scrollableHeight) * 100})
  })
  </script>

[finnhodgkin]

Couple issues we need to fix:

• Scroll height should be pushed in increments (25%, 50%, etc) so the data is grouped and easier to analyse on GA.
• Add time spent on page. Scroll height by itself isn't that great a metric - users will sometimes super quickly scroll around a page without actually taking anything in

[ZooeyMiller]

We've tested the script on my github pages test site and it works as expected. We've modified it so that rather than giving a precise percentage it gives the percent rounded down to the nearest 20. Is this
increment okay? Or would we prefer a different one?

EDIT: the old script messed up when the page was resized, but we've made a new one which accounts for this, and tracks the amount of time the user spends on the page.

<script>
(function(){
  var pageLoad = Date.now()
  var scrollableHeight = document.body.scrollHeight - window.innerHeight;

  var scrollPercent = 0;

  window.addEventListener('scroll', function() {
    var newScrollPercent = window.pageYOffset / scrollableHeight * 100;
    if (newScrollPercent > scrollPercent) {
      scrollPercent = newScrollPercent;
    }
  });

  window.addEventListener('resize', function() {
    scrollableHeight = document.body.scrollHeight - window.innerHeight;
  })

  window.addEventListener('beforeunload', function() {
    var roundedDownToTwenty = Math.floor(scrollPercent / 20) * 20;
    var timeOnPage = Date.now() - pageLoad;
    var readableTimeOnPage = new Date(timeOnPage).toISOString().substr(-12, 7);
    dataLayer.push({ event: 'scrollTracking', scrollDepth: roundedDownToTwenty, 'timeOnPage': readableTimeOnPage });
  });
})()
</script>

OLD SCRIPT:

  <script>
  var scrollHeight = 0
  window.addEventListener("scroll", function() {
    if(window.pageYOffset > scrollHeight) {
      scrollHeight = window.pageYOffset;
    }
  })

  var scrollableHeight = document.body.scrollHeight - window.innerHeight
  
  window.addEventListener("beforeunload", function(){
    var scrollPercent = (scrollHeight / scrollableHeight) * 100;
    var roundedDownToTwenty = Math.floor(scrollPercent / 20) * 20;
     dataLayer.push({'event':'scrollTracking','scrollDepth': roundedDownToTwenty})
  })
  </script>

[ghost]

tag manager error

[ZooeyMiller]

We've PR'ed the new GTM links, and set up the nav clicks and scroll tracking on GTM, once #410 is merged these will be live on the site and we can look into how they're working.