How to double your page views... on mobiles

In May we received a nice mail from Webflow team with a link to an even nicer article called “how to double your page views…”

Fantastic, down to the earth helpfull, but I faced the problem of “what kind of content people are looking for” and how to engage the visitors to get to the right content they want within the 2 500 words articles."

So I have been searching using “case A and case B” mostly for visitors using mobile. I am pretty sure that all of you are facing shorter visits from people using mobile devices.

What I found are 2 things:

  • Best set up of a post seems to be a punchy summary having with background picture fast to load, each line linked to each chapter of the post. In that way people intend to click directly to what they want so they don’t leave before they found what they want. Implication are : 1/ need to split the post into different chapters containing a/ punch line which goes into the summary b/ rich text for the chapter

  • Having a summary, it is then easy to use attributes and GA events to understand which subjects are of interest for the visitors. I found in some posts that the most wanted subject was the last one and less developped. So easy to focus and muscle the chapter… Implication are 1/ use the proper GA headers 2/ use the right footer as described in a webflow post from 2016 and use attribute to trigger an event in analytics.

Have look at this link preferably on a mobile device ( I am not an hyper pro of lay-out, but this page in on line 2 for google, getting 30% of traffic and now getting 5 minutes of average time getting from 1 minute at max)

https://www.plancher-chauffant-caleosol.fr/caleosol/plancher-chauffant-rafraichissant-reversible

And another example
https://www.plancher-chauffant-caleosol.fr/chauffage-solaire/chauffage-solaire-par-panneau-solaire-hybride

The GA headers are : (as described in a post from 2016)

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxxx', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics --> 

The footer in project setting is :

 $(document).ready(function() {      
   $(document).on('click', '[data-gatrack]', function(e) {

     var $link = $(this);
             var commaSeperatedEventData = $link.data('gatrack');
             var eventParams = commaSeperatedEventData.split(',');

             if (!eventParams) { return; }

             eventCategory = eventParams[0]
             eventAction = eventParams[1]
             eventValue = eventParams[2]

             ga('send', {
                            hitType: 'event',
                            eventCategory: eventCategory,
                            eventAction: eventAction,
                            eventLabel: eventValue
             });
       
   });
 });
 </script>

And then for the CMA post lay-out
1/ for each chapter (I am using 10 as a max), insert a ID such as chap-1 etc
2/ for each line of the summary, use a link block which can shown only if the chapter punch line is set and link it to the right chapter ID number
3/ set the attribute for each link block using

  • data-gatrack as a name
  • Data, data, data as values. I am using CMS name, click, chapter # In my example caleosol, click, 1 for chapter one.

Then you are set to see which subjects your visitors are punching to. You can focus on getting the punched chapter better.

Better? What I found is not getting 1000 words more but just looking at the chapter with the “gran-mother eye”: do we have the story. be sure you have at least a chapter which is covering a bit more that a complete screen, highlight the key sentence “lelevator test one” with comment ‘"’ setting.

That’s it.

Olivier