Description

Le module Swiper est un module engageant qui permet de demander l’avis à votre communauté sur votre marque, vos produits, offres commerciales ou services de façon très simple et dynamique en utilisant la fonctionnalité de "swipe" (mouvement de souris / doigt vers la gauche ou la droite) rendue populaire par l'application Tinder. Proposez ainsi à vos utilisateurs d'aimer ou non un visuel en le faisant simplement "glisser" vers la gauche ou vers la droite, et donnez leur l'opportunité de renforcer leur choix en leur offrant des options telles que le "Super Like" ou le "Joker". Grâce à son accessibilité, ce module convient parfaitement pour les campagnes "Mobile first".

Jouer à la démo

Création des graphismes

Pour commencer, veuillez consulter cette page qui vous donnera accès à toutes les informations essentielles pour la création graphique de votre campagne : Réaliser les graphismes de vos jeux.
Pour créer les éléments spécifiques au Swiper, veuillez consulter cet article.
Si vous souhaitez inclure des variables de jeu sur votre fond d'écran, pensez à leur laisser un espace dans la conception graphique :

Installation des pages

Le template du Swiper est composé de 4 pages :

Formulaire
Swiper
Résultat
Page de fin de campagne (end)

Si vous le souhaitez, vous pouvez ajouter d'autres pages et mécaniques de jeu. Nous vous recommandons l'ajout d'une page d'accueil et de teasing. Configurez vos paramètres de campagne en indiquant notamment les dates de diffusion, en important le règlement et la politique de confidentialité.

Personnalisation des arrières-plan

Importez vos fonds d'écrans Desktop en cliquant sur l'icône "+" dans Image de fond. Pour connaitre les spécifications graphiques des fonds pour ce module, veuillez vous référer à la partie "Design du jeu" de cet article. Vous avez aussi la possibilité d'ajouter une couleur de fond unie qui entourera vos pages de jeu - vous pouvez laisser la couleur de base ou choisir d'uniformiser votre campagne, avec une couleur qui rappelle votre marque ou vos pages de jeu par exemple.

Configuration de la mécanique

Nombre de participations : définissez le nombre de participations par jour, semaine, mois ou campagne et par utilisateur, puis créez et sélectionnez votre page Déjà Joué. Si l’utilisateur tente de rejouer, il tombera directement sur cette page.

Action du swipe à droite / à gauche : choisissez quelle action, entre "J'aime" et "Je n'aime pas", correspondra au fait de faire glisser le visuel à gauche ou à droite. Par défaut, l'action "J'aime" est définie comme étant un swipe vers la droite. ⚠️ Important : si il y a une égalité de "Like" à la fin de la campagne entre plusieurs visuels, c'est le premier visuel "liké" qui sera montré comme visuel préféré. Dans le cadre d'une page de résultat avec un TOP 3, ce sont les 3 premiers visuels "likés" qui seront affichés.

Afficher les boutons de swipe : permet d'afficher / matérialiser les boutons "J'aime" et "Je n'aime pas", et donc de les personnaliser via un visuel par exemple. Ces boutons sont optionnels et la possibilité de swiper de gauche à droite sur le visuel même sera toujours possible. Important : si vous désactivez ces boutons, ceci sera effectif sur les 2 vues Desktop et Mobile.

Limiter le nombre de visuels affichés : activez cette option si vous souhaitez définir un nombre spécifiques de visuels à afficher, au bout desquels la partie de l'utilisateur est arrêtée. Si cette option n'est pas activée, la partie s'arrêtera dès que toutes les images uploadées seront passées.
- Nombre minimum de visuels à afficher aux utilisateurs : 1 (cependant, nous vous conseillons d'en afficher au moins 10 afin d'avoir une meilleure pondération)
- Nombre maximum de visuels affichés aux utilisateurs : 100 par partie

💡 Pour connaitre le format des visuels à uploader et leur nombre maximal, veuillez consulter l'article des spécifications graphiques du Swiper.

Activer l'option Joker : créé un bouton personnalisable qui autorise l'utilisateur à passer un visuel sans swiper / se prononcer (= ni "J'aime", ni "Je n'aime pas"). Cette action ne donnera aucun point pour ce visuel et vous devrez définir un nombre maximum d'utilisation pour cette option. Par défaut, un visuel pondéré comme un Joker sortira vers le haut de la zone de jeu. Important : si l'option de limitation des visuels affichés a été activée, un visuel "passé" grâce à l'utilisation d'un Joker sera tout de même bien comptabilisé comme étant "affiché".

Activer l'option Super Like : créé un bouton personnalisable pour que l'utilisateur souligne son choix d'aimer un visuel donné. Cette action attribuera 2 points au visuel correspondant et vous devrez définir un nombre maximum d'utilisation pour cette option. Par défaut, un visuel pondéré comme un Super Like sortira vers la droite (comme un Like classique).

Afficher la page de résultat : Sélectionnez la page de résultat souhaitée, comme par exemple une page "Remerciements", ou bien une page du "Top 3 des visuels les plus likés" en utilisant les variables dédiées. Il n'y a pas de notion de score sur ce module, dès lors les pages de résultats "Score à atteindre" et "Gagnant/Perdant" ne sont pas disponibles.

Distribution des points

Les points sur Swiper ne servent pas à noter les performances des joueurs, mais plutôt à évaluer et classer les préférences des utilisateurs. Selon les paramètres que vous avez définis, certaines actions effectuées par l'utilisateur auront plus ou moins d'impact sur l'attribution des points pendant une session de jeu. Ces points accumulés par chaque élément de contenu de votre jeu seront ensuite disponibles dans vos données d'export ainsi que dans les statistiques de votre campagne. Cela vous permettra d'analyser l'engagement de votre communauté envers ces contenus.

"J'aime"	1 point
"Super Like"	2 points
"Je n'aime pas"	-1 point
Joker	0 point

Lors de l'utilisation des variables "numberLikes", "numberDislikes" et "numberSuperLikes", seuls les scores "positifs" seront affichés aux utilisateurs sur votre plateforme de campagne. Les scores "négatifs" seront présentés comme ayant "0 point" afin de maintenir la valeur de votre contenu.

En revanche, il est important de noter que les scores négatifs seront effectivement affichés comme tels dans l'export des participants Cela vous permettra d'établir un classement de vos produits/services en prenant en compte tous les avis, positifs et négatifs.

Contenu du Swiper

Utiliser les médias de la page : sélectionnez "Aucune" si vous décidez d'importer toutes les photos visibles aux utilisateurs pour qu'ils puissent voter. Pour procéder à l'importation, cliquez sur le bouton "Importer des contenus" ou allez dans la section "Médias" de votre campagne. Pour plus de détails, consultez cet article.

Si vous souhaitez récupérer des médias venant d'une autre page de votre campagne (par exemple si vous avez demandé à vos utilisateurs d'uploader leurs propres photos), sélectionnez la page Upload Media que vous aurez installé au préalable. Vous pouvez aussi sélectionner une page Customizer, Shopping List ou tout autre module de création si votre Swiper propose de voter sur des créations faites par les utilisateurs.

Filtrer par catégorie (seulement si une page est associée dans "Utiliser les médias de la page"): affiche la liste des catégories paramétrées dans le module Upload Média - voir la page dédiée pour plus d'informations à ce sujet.

Afficher uniquement les médias acceptés (seulement si une page est associée dans "Utiliser les médias de la page"): cela signifie que lorsqu’une personne upload sa photo, il faudra que vous acceptiez qu’elle figure ou non dans la galerie, via une action de modération de votre part. Tant que vous n’aurez pas accepté ou refusé le média en question, la photo ne sera pas affichée dans la galerie. Cela demande donc une modération régulière de la part de votre équipe. Si vous n'activez pas cette option, toutes les photos uploadées par les utilisateurs apparaîtront directement dans la galerie média, et par extension, dans le Swiper.

Activer l'affichage aléatoire des contenus : si activée, cette option garantit qu'à chaque partie les contenus seront mélangés et n’apparaîtront pas suivant l'ordre dans lequel vous les avez importés. Si un utilisateur joue plusieurs fois sur la campagne, le module affichera en priorité les visuels qui n'ont pas encore été vus (si l'adresse email utilisée est la même que lors de la première partie).

Importer vos médias

⚠️ Avant de pouvoir importer vos médias, vous devez absolument publier votre campagne une première fois. À défaut, les accès au Management des utilisateurs, médias et emailings seront indisponibles.

Si vous choisissez à l'avance les photos que vos utilisateurs devront "liker", vous devrez faire leur importation de cette façon :

Allez dans la rubrique "Utilisateurs" ou cliquez sur le bouton "Importer des contenus"
Sélectionnez l'onglet "Médias" puis cliquez sur "Importer des médias"
Uploadez vos images (taille libre, nous recommandons cependant de limiter la poids de vos visuels à 400 ko maximum afin de favoriser une plus grand fluidité). Elles sont visibles immédiatement dans la galerie.
Remplissez les informations nécessaires à l'identification de votre photo (nom, description, description longue, catégorie,URL, langue, point de vente,...). L'import via le fichier de configuration vous aidera à gagner du temps lors de cette étape si vous avez un nombre important de visuels à décrire.

Vos photos sont désormais installées sur votre campagne et prêtes à être configurées.

✍️ À noter : les visuels choisis ne sont pas visibles dans la prévisualisation du moteur de jeu au sein de l'éditeur, il faudra donc vérifier que le rendu est bien celui souhaité via le test et/ou diffusion du jeu.

Voici une vue globale d'un fichier d'import des informations de visuels (avec une 1ère ligne d'explications par colonne) à télécharger depuis l'onglet "Media" :

Vous trouverez une copie de ce fichier modèle à télécharger ici :

Télécharger le modèle

En dehors des colonnes habituelles pour ce type de module avec import média, il existe une nouvelle colonne intitulée "Tag" qui est essentielle pour le suivi des votes. En effet, cela vous permet de catégoriser chaque élément visuel importé sous un certain tag qui remontera dans les statistiques présentes dans Insight, vous permettant ainsi d'affiner les préférences clients par tag. Ceci peut être utile pour aider à l'analyse des données par type de contenu.

Exemple : dans le cadre d'une campagne Swiper sur des produits de beauté, nous pouvons ainsi visualiser le nombre de "Like" ou "Dislike" sur les produits de la gamme Anti-âge, ceux de la gamme Hydratant, etc...

Cas d'une campagne avec plusieurs pages Swiper

Il est tout à fait possible d’avoir plusieurs modules Swiper avec pour chacun des types de visuels différents sur une seule campagne. Dans ce cas là, il faudra bien diviser les catégories de visuels entre chaque Swiper.

Voici en détails la procédure à suivre (exemple avec 2 Swipers installés) :

1. Installez une page “Upload Média” à la fin de votre campagne : cette page Upload Média sert seulement à créer les différentes catégories de visuels et ne sera pas visible par vos utilisateurs mais doit cependant rester en permanence installée.

2. Activez le champ “Catégorie” sur la page “Upload Média” et cliquez dessus. Entrez le nom de toutes les catégories que vous allez utiliser dans “Liste des catégories”. Exemple : je créé une catégorie “Nature” et une catégorie Animal sur la même page Upload Média.

3. Allez sur l’onglet “Contenu” de la première page Swiper et sélectionnez la page “Upload Média”. Filtrez ensuite la catégorie voulue : vous ne devez avoir qu’une seule possibilité. Faite de même avec le second Swiper. Dans l’exemple ci-dessous, je souhaite que mon 1er Swiper montre des visuels de paysages, je vais donc utiliser les médias de la page “Upload Média” et sélectionner la catégorie “Nature”. Sur le 2ème Swiper, je souhaite montrer des visuels d’animaux, je vais donc utiliser les médias de la page “Upload Média” et sélectionner la catégorie “Animal”. Publier la campagne.

4. Importer vos visuels depuis l’onglet “Médias” de la section “Utilisateurs” et rafraîchissez la page.

5. Pour chaque visuel, sélectionnez la page “Upload Média” puis la catégorie à laquelle il correspond. Une fois cette opération effectuée, vos visuels seront donc visibles à l’utilisateur sur chaque Swiper correspondant. Attention : vous devrez rafraîchir la page après la sélection de la page “Upload Média” du premier visuel pour que les catégories soient disponibles en permanence.

Cas d'une campagne multilingue

Si vous souhaitez installer une campagne Swiper multilingue, il faudra porter une attention particulière aux visuels que vous allez importer. En effet, il va falloir bien séparer les visuels par langue depuis la section "Médias". Pour cela :

Installer toutes les langues désirées sur l'éditeur.
Importer le fichier de données sans remplir la colonne "lang" et en dupliquant avec des noms différents les visuels qui seront présents à la fois sur plusieurs langues.
Dans l'onglet "Médias", choisir le drapeau approprié pour chaque visuel : c'est cette action qui permettra de définir dans quelle langue chaque visuel apparaîtra sur la campagne.
Attention, vous ne pouvez choisir qu'une langue par visuel, d'où le fait de dupliquer un visuel existant sur plusieurs langues.

Personnalisation de l'apparence

Type de contour : vous pouvez afficher simplement votre visuel ou choisir de l'entourer d'un contour parmi les 3 choix proposés :

Vous pourrez ensuite personnaliser ce contour avec la couleur de votre choix, ainsi que gérer sa taille et ses arrondis pour un résultat optimal. Voir la section Définir le format de mes visuels pour plus d'informations à ce sujet.

Ombre portée : permet d'ajouter une ombre sous votre visuel pour donner une idée de profondeur.

Activer les animations au like / Super Like : cette option permet de dynamiser et de souligner l'appréciation du visuel par l'utilisateur grâce à l'ajout de formes et d'animations spécifiques pour les visuels choisis. Vous trouverez un aperçu de toutes les possibilités dans la section Formes et animations des visuels "likés" de cet article.

Apparition des visuels : vous pouvez choisir comment apparaîtront les visuels au lancement de la partie de Swiper via une animation d'entrée pouvant se faire :
- En fondu (depuis chaque côté)
- Depuis le haut
- Depuis le bas
- Depuis la droite
- Depuis la gauche
- Depuis chaque côté

Animation d'un visuel swipé : une fois qu'un visuel a été swipé à gauche ou à droite, une animation personnalisée le fera disparaître. Les choix possibles pour cette disparition sont :
- Disparition en fondu
- Rebonds
- Chute
- Rotation
- Scale
- Badge

Pour voir la représentation visuelle de chaque apparition/animation, voir la partie Apparition et animations des visuels swipés ci-dessous.

Apparition et animation des visuels

Voici toutes les formes d'apparitions et d'animations pour vos visuels :


En fondu	Depuis le haut	Depuis le bas	Depuis la droite	Depuis la gauche	Depuis chaque côté

Disparitions des visuels :


Disparition en fondu	Rebonds*	chute	rotation	scale	Badge*

Rebonds* : Le visuel rebondit sur le bas du fond de jeu

Badge* : Un badge vient s'installer sur un coin en haut du visuel (de couleur grise et non modifiable

Format des visuels

Il est possible d'importer des visuels sous tout type de format (Portrait, Paysage, Carré,...), le module se chargeant ensuite d'adapter le rendu en fonction du format du contour que vous aurez personnalisé. Exemple ci-dessous avec un visuel importé au format portrait et un au format carré :

Pour créer le cadre de votre choix et définir le rendu de vos visuels :

1. Définissez la hauteur et la largeur du contour de visuel depuis l'écran de configuration en déplaçant les côtés du contour.

2. Modifiez la taille du contour pour donner la forme finale d'apparition de votre visuel. A savoir : le nombre de pixel indiqué correspond à la distance entre le bord du contour et le bord du visuel.

Exemple :

Formes et animations des visuels "likés" & "Super likés"

Si vous activez les animations au Like et Super Like, vous pourrez choisir de personnaliser la forme que prendra le visuel une fois liké / super-liké , ainsi qu'une courte animation de mise en évidence du choix correspondant. Voici ci-dessous toutes les possibilités qui s'offrent à vous :

Forme du visuel Liké / Super Liké


Coeur	Etoile	Pastille	Losange	Carré

Effets du visuel Liké / Super Liké


Battements	Secousse	Scintillement

✍️ À noter : les animations choisies ne sont pas visibles dans la preview du moteur de jeu au sein de l'éditeur, il faudra donc vérifier que le rendu est bien celui souhaité via le test et/ou diffusion du jeu.

Variables spécifiques au Swiper

Le Swiper vous permet d'afficher de nombreuses informations sur les contenus de votre campagne, en temps réel ou au global (ex: nombre de votes, Super Likes,...). Voici comment utiliser les possibilités de l'éditeur pour optimiser la page de résultat :

1. Afficher les visuels (les plus) appréciés par l'utilisateur

Valorisez les choix faits par l'utilisateur en lui montrant le ou les visuels qu'il a aimé grâce à l'image dynamique :

Allez sur l'onglet "Médias" dans l'éditeur
Sélectionnez "Ajoutez le visuel dynamique" et placez le à l'endroit souhaité
Cliquez sur l'image et configurez comme sur l'exemple ci-dessous en modifiant la page associée et la partie "Image à afficher" :

2. Afficher les noms des contenus les plus appréciés par l'utilisateur

Soulignez les contenus les plus importants pour l'utilisateur en affichant leurs noms via la variable de jeu %swiper_content_name_X% qui affiche le nom associé à un visuel sur la page de résultat en ne prenant en compte que les votes de l'utilisateur actuel. Remplacez "X" par le chiffre associé au classement du contenu, par exemple %swiper_content_name_1% pour le contenu qui a obtenu le nombre de votes le plus élevé de la part de l'utilisateur, %swiper_content_name_2% pour le contenu qui a eu le deuxième taux de votes le plus élevé de sa part, et ainsi de suite...

3. Afficher une redirection vers une URL liée à un contenu

Boostez le trafic vers votre site en insérant un bouton qui permettra la redirection vers un lien URL défini lors de l'import des informations liées à votre contenu.

Aller sur l'onglet "Boutons" dans l'éditeur
Créer un bouton et placez le à l'endroit souhaité
Cliquez sur le bouton et paramétrez comme sur l'exemple ci-dessous en modifiant la partie "Choix de l'URL" par n'importe quel visuel que vous voulez montrer à l'utilisateur :

Voici un exemple d'installation de ces 3 options utilisées en simultané dans l'éditeur :

Installation de la partie Mobile

Une fois votre campagne Desktop configurée, il vous faut passer en vue Mobile afin d'importer les fonds dédiés et de mettre en forme vos différentes pages pour ce support. Pour importer des fonds Mobile, suivez la même procédure que pour les fonds Desktop.

Test et publication de la campagne

Lorsque les versions Desktop et Mobile sont finalisées, vous pouvez prévisualiser votre campagne pour la tester. Pour connaitre les choses indispensables à vérifier, consultez cet article. Une fois que vos tests sont terminés, vous pouvez publier votre campagne sur votre domaine personnalisé et la diffuser auprès de votre audience.

Export des données

Vous trouverez ci-dessous la description des colonnes.

Export des participants

joker_number : indique le nombre de contenus qui ont été marqués "Joker" par l'utilisateur
superlike_number : indique le nombre de contenus qui ont été marqués "Super Like" par l'utilisateur
dislike_number : indique le nombre de contenus qui ont été marqués "Je n'aime pas" par l'utilisateur
like_number : indique le nombre de contenus qui ont été marqués "J'aime" par l'utilisateur
most_liked_content : indique le nom de/des contenus qui ont été le plus aimé par l'utilisateur sur la campagne
superliked_content : indique le nom de/des contenus qui ont été "Super liké" par l'utilisateur sur la campagne
liked_content : indique le nom de/des contenus qui ont été aimé par l'utilisateur sur la campagne. Cette colonne affiche un maximum de 10 noms de contenus, par ordre d'apparition.
content _joker : indique le nom de/des contenus qui ont été marqués "Joker" par l'utilisateur sur la campagne
content_superlike / content_dislike / content_like / content_name / content_value / tag_name : ces colonnes ne sont pas applicables à cet export et resteront donc vides.

Export des participations

Chaque ligne représente les informations correspondantes à chaque contenu visualisé sur la campagne par l'utilisateur :

content_name : indique le nom du contenu donné pour cette ligne de résultat
content_superlike : indique si le contenu a été "Super liké" sur la campagne (1 = oui, 0 = non)
content_dislike : indique si le contenu a été marqué "Je n'aime pas" sur la campagne (1 = oui, 0 = non)
content_like : indique si le contenu a été marqué "J'aime" sur la campagne (1 = oui, 0 = non)
content _joker : indique si le contenu a été marqué "Joker" sur la campagne (1 = oui, 0 = non)
content_value : indique le nombre de points attribués à ce contenu
tag_name : indique le tag correspondant à ce contenu
joker_number / superlike_number / dislike_number / like_number / most_liked_content / superliked_content / liked_content : ces colonnes ne sont pas applicables à cet export et resteront donc vides.

Analyse des statistiques

	Graphique "Nombre de clics" Permet d'afficher le pourcentage de "Like", "Super Like", "Dislike" et "Joker" par visuel - il est possible de faire une visualisation du nombre global de clics par visuel, ou bien de les diviser par page (dans le cadre de plusieurs modules Swiper sur une même campagne) ou par tag.
	Graphique "Top 10 contenus" Permet d'afficher les visuels préférés de la campagne et les points qui leur sont associés en cumulé - il est possible de faire une visualisation du nombre global de clics par visuel, ou bien de les diviser par page (dans le cadre de plusieurs modules Swiper sur une même campagne) ou par tag.

Les visuels de cet article sont utilisés avec l'aimable autorisation de Stanley Chow.