Infinite scroll sur Hubspot, comment ?

Jimmy HOAREAU - 11 décembre 2017 - Tags: Inbound Marketing

Vous l'avez vu sur un site et vous souhaiteriez l'avoir sur le votre ou pire vous l'aviez sur votre site sous wordpress/drupal et vous ne savez pas comment mettre cela en place sur votre site sous Hubspot.

Alors vous êtes au bon endroit ! Voyons ensemble comment mettre en place un effet infinite scroll avec Hubspot.

Euh ... infinite scroll c'est quoi ?

Commençons par le commencement, l'infinite scroll ou infinite scrolling ou encore défilement sans fin est le principe de pouvoir faire défiler le contenu d'un site sans avoir à cliquer. Simplement dit : vous voyez le flux facebook ou twitter, vous pouvez y passer des heures juste en faisant défiler les différents blocs du site ? C'est de l'infinite scrolling.

L'idée est de mettre en place la même chose sur votre blog pour permettre à vos visiteurs de passer en revue vos articles sans avoir à quitter la page.

blog infinite scroll hubspot

Mise en garde sur l'infinite scrolling avec Hubspot (et en général)

Si l'effet peut parraitre intéressant graphiquement il faut avoir en tête que ce n'est pas ce qui se fait le mieux d'un point de vue référencement (SEO). Si je devais vous donner mon avis, comme je le fais pour mes clients et ceux qui me le demande, je vous inviterais à fuire cette méthode car elle demande un niveau d'attention assez élevé et une maitrise du sujet pour ne pas voir disparaitre 90% de son site des radars de Google, Bing et autres moteurs de recherches qui n'apprécient pas le javascript.

Preuve du risque à mettre en place ce type d'effet : bien que beaucoup de sites il y a 2-3 ans avaient choisi ce format, aujourd'hui on ne le voit quasiment plus.

Avant de décider si vous vous lancez dans l'infinite scroll pour votre blog voici un petit résumé des pours et contres :

C'est adapté à la lecture sur mobile [POUR]

La lecture sur mobile par exemple profite d'un format de lecture où les clics sont peu nombreux, vous obtiendrez des temps de visites allongés de ce fait. Si vos personas sont des CXO (CEO, CMO, CFO, CTO, ...) qui consomment plutôt sur mobile c'est peut-être un format à envisager.

Cela permet de conserver l'attention du lecteur plus longtemps [POUR]

Si vos sujets sont complexes et que cela demande une certaines concentration voire la lecture de plusieurs articles pour entrer dans votre thème, alors c'est aussi une solution envisageable. Plus on doit cliquer sur des "lire la suite" ou d'autres articles et plus on risque de perdre le lecteur. Les sites sur lesquels nous perdons le plus de temps sont quasiment tous basés sur l'inifinite scrolling.

Les visiteurs se perdent rapidement [CONTRE]

Si les visiteurs passent plus de temps sur votre site, il faut aussi avoir en tête qu'il sera plus difficile pour eux de retrouver une information qui les a intéressée. En perdant la notion de "page" il leur sera difficile de comprendre votre architecture et de se souvenir où ils ont lu un contenu.

Personne ne verra votre footer [CONTRE]

A moins d'arriver à bout de votre blog entier, peu de personne arriveront à voir votre "pied de site". Ce n'est pas très grave mais c'est pourtant une zone où beaucoup vont chercher des informations sur votre société (dans les mentions légales). Avec les règles de plus en plus strictes de la CNIL et le RGPD qui débarque en mai 2018 cela peut-être pertinent d'avoir des mentions légales accessibles non ?

Infinite scrolling demande du javascript [MOYENNEMENT CONTRE]

Plus vous avez de javascript et plus votre site est lourd mais si vous n'avez pas abusé d'effets de feux d'artifices alors ce n'est pas l'infinite scroll qui va géner votre temps d'ouverture de page. 

Et pour le référencement [HYPER CONTRE]

Je l'ai déjà dit plus haut je pense que cela demande trop de gestion. Mais attention je ne dis pas que c'est impossible de bien référencer un blog ou un site qui utilise le défilement infini. D'ailleurs plutôt que de rentrer dans ce débat je vous propose de vous documenter directement à la source en lisant les recommandations de Google sur l'infinite scrolling. Cela date de 2014 au moment du buzz de l'inifinite scroll et cela reste toujours vrai 3 ans après.

recommandation SEO infinite scroll Hubspot Google

Mettre en place un infinite scroll avec Hubspot

 Parlons un peu technique à présent. L'objectif est de réaliser un comportement sur hubspot comme sur le gif ci-dessous, on charge les articles suivants au fur et à mesure qu'on avance dans le blog.

exemple infinite scroll hubspot

1. Il nous faut une structure html/hubL de base

Si vous n'êtes pas un développeur simplifions la chose en partant du principe que vous utilisez Hubspot en mode drag'n'drop et donc que vous avez le module Blog Content mis en place. Ce n'est pas ce que j'ai pris comme base pour mon gif mais on peut partir là-dessus.

Sachez simplement qu'il nous faut une structure de ce type :

<div class="container">

</div>
<!-- status elements -->
<div class="scroller-status">
<div class="infinite-scroll-request loader-ellips">
...
</div>
<p class="infinite-scroll-last">End of content</p>
<p class="infinite-scroll-error">No more pages to load</p>
</div>
<!-- pagination has path -->
<p class="pagination">
<a class="pagination__next" href='https://www.hackspot.fr/page/2'>Next page</a>
</p>

Ce que vous avez quasiment de base dans Hubspot. A vous de choisir ce que vous voulez faire ressortir de vos articles : image, titre, auteur, date, tags, etc ...

2. Il nous faut un loader

Le loader c'est le petit cercle orange qui tourne dans l'exemple. Vous pouvez trouver un paquet de loader disponible sur internet.

Si vous en voulez un cool fait juste en css alors je vous propose de remplacer la partie "status element" par celle la:

<!-- status elements -->
<div class="scroller-status">
<div class="loader-ellips infinite-scroll-request">
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
</div>
<p class="scroller-status__message infinite-scroll-last">End of content</p>
<p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
</div>

3. On a besoin d'un script (si on ne veut pas tout inventer)

Je vous  conseille celui qui est le plus utilisé aujourd'hui et que vous trouverez sur infinite-scroll.com. Pour l'ajouter il suffit d'ajouter ce morceau de code sur votre site. Vous pouvez également le télécharger et créer un fichier javascript sur votre instance de Hubspot, cela permet d'être plus indépendant de la source.

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>

4. Une formule magique et le tour est joué !

Puisque vous utilisez Hubspot, Jquery est déjà appelé donc pour faire fonctionner l'infinite scroll Hubspot il suffira d'ajouter le code suivant :

<script>
$('.container').infiniteScroll({ // options path: '.pagination__next',
append: '.article',
status: '.scroller-status',
hideNav: '.pagination', });
</script>

Il est important de rester constant dans le nom de vos classes ou ID et tout devrait fonctionner.

Vous pouvez jouer avec les options que vous trouverez sur le site d'infinite scroll pour gérer des effets au chargement par exemple ou masqué ou non la navigation. Il est par exemple possible d'avoir une URL générée afin de simuler une navigation page par page alors même que vous êtes en infinite scrolling, ce qui annule l'un des [ CONTRE] que nous avons vu plus haut.

Trop compliqué l'inifinite scroll sur Hubspot ?

Alors n'hésitez pas à me contacter pour le mettre en place sur votre site !

Les plus vus