Réaliser une navigation previous/next sur un article Hubspot

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

Au delà de la navigation principale qu'on retrouve classiquement dans le menu, il est pertinent de permettre aux lecteurs de votre blog de naviguer sur une thématique (ou topic) en leur offrant une navigation inter-articles. Si cela ne vous parle pas vraiment, je parle tout simplement de la navigation "previous / next" qui vous permets de passer d'un article à un autre.

A quoi ressemble une navigation previous / next

Voici par exemple une navigation plutôt bien faite qui permet en bas de chaque article de naviguer aléatoirement sur des articles précédents ou suivants en ne tenant compte que de la chronologie de parution. C'est le cas le plus courant pour un blog qui a un seul buyer persona avec quelques topics.

navigation previous next hubspot

Avant-propos

Nous allons voir ici une seule approche parmi de nombreuses, plutôt simple et que je destine plutôt aux non experts Hubspot. Elle a le mérite de rendre indépendant l'utilisateur et c'est ce que je recherche dans mon approche aujourd'hui.

Nous allons travailler en utilisant le système de layout de Hubspot qui vous permet de faire des drag'N'drop de modules. C'est justement 2 modules que nous allons créer :

  1. Un module pour gérer la navigation "previous"
  2. Un module pour gérer la navigation "next"

Aparté sur l'interface utilisateur des navigations "previous / next"

Il y a un débat sur la position du bloc ou texte indiquant l'article précédent et l'article suivant, je ne le comprends pas. En effet même si nous sommes sur le digital je considère qu'il y a une règle de base, le futur est à droite et le passé à gauche. C'est comme dans un livre, on lit en tournant la page vers la gauche et on avance dans notre découverte vers la partie droite du livre ouvert.

Donc s'il vous plait arrêtez avec les navigations ou le précédent est à droite et le suivant à gauche, vous me perdez à chaque fois !

Répétons ensemble :

Précédent = à gauche <- | -> suivant = à droite

Comment mettre en place une navigation inter-articles en bas de mes articles sur Hubspot ?

Dans notre exemple nous avons créé 3 articles dans un blog avec pour titres:

  • Article 1
  • Article 2
  • Article 3

Chacun à une image à la une (ou featured image pour ceux qui sont bilingues).

Navigation previous avec Hubspot

Il y a 3 variables HubL (le langage Hubspot) à connaitre pour gérer notre navigation:

  •  content.previous_post_featured_image  : c'est l'URL de l'image de l'article précédent.
  •  content.previous_post_name  : c'est le nom de l'article précédent.
  •  content.previous_post_slug  : c'est l'URL (en fait le SLUG de l'URL, bref le bout de l'URL) de l'article précédent.

La magie de Hubspot c'est que si ces variables sont vides alors elle ne génèrent pas de bugs, elles sont justes vides. Ce qui est parfait car cela nous évite d'avoir à gérer le cas du premier article qui n'aura pas de précédent (previous). Ce n'est pas optimal mais cela fonctionne, nous verrons lors d'un autre post qu'il serait sympa de profiter de cet espace vide pour le remplir d'un CTA, ou pourquoi pas de votre article le plus populaire, ou ... bref il y a plein de stratégie possible mais ce n'est pas notre sujet ici.

Navigation next avec Hubspot

On prend les mêmes et on remplace previous par next ... parfois c'est simple le code.

Créer un custom module sur Hubspot

Dans le menu Hubpost cliquez sur : CONTENT > CONTENT SETTINGS et dans la gauche de votre écran choisissez CUSTOM MODULES.

creer un custom module avec hubspot

A droite cette fois-ci cliquez sur "créer un nouveau module" ou pour ceux qui, comme moi, ont commencé sur Hubspot avec une version seulement en anglais et qui n'arrive plus à s'y retrouver en français cherchez le bouton ci-dessous.

bouton pour faire un nouveau module Hubspot

 

La fenêtre ci dessous s'ouvre alors et il ne vous reste plus qu'à cliquez sur "create" pour lancer le développement de votre premier module Hubspot.

custom module hubspot

 

Et comme tout codeur qui se respecte vous allez devoir donner un nom à ce que vous faites. Prenez de bonnes habitudes tout de suite en utilisant des noms qui parleront au plus grand nombre. Je vous propose "navigation NEXT" pour le module qui gèrera la navigation vers l'article suivant ... ça me semble pas mal.

faire un module hubspot pour la navigation previous next

 

Il ne vous reste plus qu'à copier-coller dans votre éditeur ouvert le code suivant en remplaçant les chevrons par des accolades bien sur:

<a href="/<< content.next_post_slug >>" style="text-align: center;color: white;font-size: 24px;"> 
<div class="next" style="background:url(<< content.next_post_featured_image >>); background-repeat:no-repeat; background-size:cover; background-position:center center;">
<div style="height: 290px;line-height: 100px;margin: 20px;">
<< content.next_post_name >>
</div>
</div>
</a>

J'ai intégré dans le code quelques éléments de style afin que ceux qui débutent puissent avoir un résultat immédiat. Evidemment pour les autres je vous invite à nettoyer mon code de tout le surplus pour ensuite aller créer dans votre feuille de style votre propre rendu graphique.

Publiez votre module et recommencez l'opération en remplaçant partout le mot "next" par "previous" et vous aurez publié votre 2ème module.

 

hubspot gestion du layout avec une navigation

 

Dans votre template qui gère votre blog il vous suffit ensuite de prendre vos modules dans la sidebar de gauche dans la catégorie "custom modules" et de les déposer à l'endroit où vous souhaitez les voir (ils sont en bleus).

Voila le résultat final :

 

exemple d'article de blog avec hubspot et une navigation previous next

J'espère que cet article vous aura été utile, dites moi si vous avez besoin d'aide, je serais ravi de vous aider à monter votre navigation inter-articles sur Hubspot !

Et si je ne veux pas de navigation previous / next sur Hubspot

Il existe d'autres options tout aussi valables pour permettre à vos lecteurs de passer du temps sur votre blog. Par exemple celle que nous avons choisi sur ce blog, à savoir proposé des articles les plus lus.

Il est également de proposer les articles sur le même sujet ou les articles les plus récents ou ... il n'y a pas vraiment de limites donc à vos idées !

Les plus vus