Fenêtre pop-up quoi. HTML : créez votre propre fenêtre PopUp

C'est un fait connu : la plupart des visiteurs n'effectuent pas d'achat lors de leur première visite sur la page produit d'une boutique en ligne et ne laissent même pas de prospect - mais quelle est l'ampleur de cette majorité ?

Selon une étude de la société See Why, c'est le cas de 99 % des visiteurs qui visitent la ressource pour la première fois. Bien sûr, on parle avant tout de sites eCommerce, mais la question se pose toujours : si 99% des visiteurs n'achètent rien lors de leur première visite, alors comment les inciter à revenir ?

La bonne nouvelle, ce sont les statistiques suivantes : 75 % des visiteurs sont toujours prêts à revenir plus tard pour finaliser l'achat.

Peu importe ce que vous pensez des popups, cette technique marketing reste efficace pour attirer l’attention et collecter des données de contact (génération de leads).

En termes simples, l'utilisation de fenêtres contextuelles est le moyen le plus rapide de renvoyer le visiteur vers la page de destination.

Pourquoi?

Cela implique une technique de persuasion connue sous le nom d’« interruption de modèle », dans laquelle votre attention, bercée par un rythme ou une séquence narrative particulière, est soudainement attirée de manière agressive vers quelque chose d’inattendu. Vous ressentez souvent cet effet lorsque vous regardez des films, des émissions de comédie et même lors de négociations importantes.

Lorsqu'il s'agit de marketing de contenu et d'e-mail, « l'interruption de modèle » est plus efficace lorsque le lecteur est déjà déterminé à résoudre le problème et à poursuivre l'interaction (s'abonner à la newsletter, effectuer un achat, etc.).

Un exemple du service Made.com. Les spécialistes du marketing ont offert à leurs visiteurs un bon gratuit d'une valeur de 10 euros pour une simple bagatelle : une adresse e-mail. Cela a été fait parce que :

Selon ExactTarget, e-mail est le canal marketing préféré des clients, puisque 77 % des consommateurs préfèrent le courrier électronique aux autres canaux d'interaction avec la marque.

Peut-être que les pop-ups ne sont pas si mauvais après tout ?

Il y a de fortes chances que vous détestiez les pop-ups, et vous avez le droit de le faire. Bien sûr, qui aimerait voir quelque chose comme ça immédiatement après avoir accédé à la page de destination :

Ou ceci :

Vous ne connaissez peut-être même pas le domaine d’activité de l’entreprise, mais vous êtes déjà couvert jusqu’au cou de fenêtres pop-up. Les exemples ci-dessus n'aboutissent pas : le visiteur souhaite d'abord en savoir plus sur la marque, puis télécharger le « Guide gratuit pour la génération de trafic », le « E-Book gratuit », etc. Bien sûr, la plupart des utilisateurs détestent ce genre de choses et répondre en refusant toute interaction ultérieure avec la marque.

Peut-être devriez-vous vous calmer un peu et regarder les résultats des tests. Que disent les chiffres ? Voici les données d'un test fractionné d'une pop-up et du bouton « Non, merci » sur une offre pop-up.

Impressionnant? Examinons ensuite les résultats des entreprises qui utilisent efficacement cette approche.

1. Expérience avec les pop-ups

Dans une journée type, le service WP Beginner reçoit environ 70 à 80 nouveaux abonnés grâce à diverses méthodes génération de leads. Mais plus la base d'abonnement est grande, plus entreprise plus prospère, les spécialistes du marketing du service ont donc décidé d'expérimenter les fenêtres contextuelles.

Qu'a-t-on fait ?

Une fenêtre popup a été développée qui apparaît lorsque l'utilisateur a l'intention de quitter le site. L'effet a été obtenu grâce aux technologies de suivi du curseur et à d'autres méthodes. Voici à quoi ressemblait la fenêtre :

Quels sont les résultats ?

L'utilisation d'une fenêtre contextuelle sur les pages clés (et non sur l'ensemble du site) a augmenté les inscriptions de 660 %. Autrement dit, de 70 à 80 leads, le service est passé à 445 à 470 leads par jour - un saut vers un niveau qualitativement nouveau.

Le cas suivant vient de Backlinko. Après avoir ajouté un CTA à la page de destination avec une offre d'abonnement à la newsletter, la conversion est tombée à 1,73 % - il fallait faire quelque chose de toute urgence. Les spécialistes du marketing de l'entreprise ont développé une fenêtre contextuelle qui apparaît devant les utilisateurs qui décident de quitter la page de destination. Voici à quoi cela ressemblait :

Vous souvenez-vous que le taux de conversion était d'environ 1,7 % avant d'utiliser la fenêtre contextuelle ? 2 jours après le lancement du pop-up, les statistiques ont changé. En seulement deux jours, le taux de conversion est passé de 1,73 % à 4,83 %, soit plus de 2 fois !

Bien entendu, dans un monde où un test compétent peut augmenter la conversion de 100, 300 %, voire 1 300 %, les résultats de cette expérience semblent modestes. Cependant, ce n’est pas tout à fait vrai.

Tout d’abord, avec une large base d’abonnés, les spécialistes du marketing peuvent créer du contenu pertinent pour leur public et mettre en place un système de vente croisée. Ainsi, en tenant compte des ventes incitatives et d’autres facteurs, un contact rapporte en moyenne 15 $ au service.

Si les fenêtres contextuelles attirent 15 abonnés supplémentaires par jour, le revenu quotidien augmentera en moyenne de 225 $ et le revenu annuel de 82 125 $, respectivement. Ce n'est pas un mauvais revenu pour 2 minutes de vérification des paramètres, non ?

De toute évidence, ceux qui détestaient les pop-ups avaient tort. Mais il y a d’autres facteurs : le taux de rebond et l’impact des pop-ups sur l’expérience utilisateur. Et ça ?

2. Comment les pop-ups affectent-elles l'expérience utilisateur et le taux de rebond ?

L'une des premières pensées lorsqu'on évoque un pop-up est l'augmentation du nombre d'échecs, car de plus en plus de personnes quitteront la page de destination à cause de la fenêtre pop-up, ce qui est tout à fait logique. Cependant, rappelez-vous les exemples ci-dessus : les spécialistes du marketing de WP Beginner n'ont constaté aucune fluctuation de cet indicateur, ni Backlinko - le nombre d'échecs n'a pas changé dans les deux cas.

Dan Zarrella est arrivé à la même conclusion après avoir effectué une série de tests sur sa page de destination personnelle, constatant que la présence d'une popup n'avait aucun impact sur les taux de rebond. La seule chose qui a changé, c'est qu'en supprimant les pop-ups, Dan a perdu 50 % des leads entrants.

3. Qu’en est-il de l’expérience utilisateur ?

Apparemment, les visiteurs s'en moquent. Les spécialistes du marketing WP Beginner n'ont reçu aucune plainte concernant les fenêtres contextuelles de la part de leurs clients.

Si vous y réfléchissez, cela a du sens. Oui, c'est désagréable de voir quelque chose comme ça après avoir accédé à une ressource en utilisant un lien de Facebook :

Mais ce n’est pas une raison pour quitter le site avec colère. Que faites-vous habituellement dans de tels cas ? C'est vrai : fermez la fenêtre contextuelle et continuez à rechercher le contenu souhaité.

De plus, une bonne utilisation des pop-ups peut améliorer l’expérience utilisateur, à l’instar du service Vero. Si tu t'arrêtes page d'accueil et que vous n'effectuez aucune action dans les 30 secondes, vous verrez une fenêtre dans le coin avec le texte : "Qu'est-ce qui vous empêche de vous abonner à Vero maintenant ?"

4. Comment détruire la convivialité avec les pop-ups ?

Cependant, vous ne pouvez pas intégrer n’importe quelle annonce pop-up dans votre page de destination et espérer un taux de conversion élevé. Si une fenêtre contextuelle ne ressort pas sur la page, elle est pour le moins inutile.

Vous êtes sur le point de quitter la page de destination, et puis... Bam ! Quelque chose d’étrange s’est produit, où est apparu le bouton CTA au milieu de la page ? En réalité, cette fenêtre contextuelle était superposée à une page non assombrie, se fondant dans l'arrière-plan. Lorsque vous ne séparez pas les pop-ups du reste de la page, cela gâche vraiment l'expérience utilisateur.

Il s'avère que de nombreux spécialistes du marketing se trompent à propos des pop-ups : il s'avère qu'ils fonctionnent toujours. Vous allez maintenant apprendre à utiliser les pop-ups sur votre page de destination pour obtenir un effet maximal.

5. Créez des pop-ups efficaces

Avant de commencer à créer des pop-ups, examinons leurs principaux types. Il existe deux principaux types de fenêtres contextuelles :

Superpositions

Ils ressemblent à l’exemple ci-dessus. De telles fenêtres obscurcissent tout l’écran, assombrissant ainsi l’arrière-plan. La popup reste le seul élément de la page clairement visible par l'utilisateur - en dernièrement Il existe une tendance à utiliser des fenêtres contextuelles dans ce format.

Le célèbre spécialiste du marketing Dan Zarella utilise également des superpositions d'assombrissement de l'arrière-plan, mais la fenêtre elle-même est beaucoup plus petite que d'habitude :

Fenêtres qui apparaissent suite au défilement de la page

Ce type de pop-ups apparaît lorsque l'utilisateur fait défiler jusqu'à une certaine étape de la page - le plus souvent ce format utilisé dans les blogs et il est extrêmement efficace. Après avoir parcouru la moitié de la page, vous verrez quelque chose comme ceci :

En fonction du logiciel ou du plugin que vous utilisez, vous pouvez expérimenter la profondeur de défilement : jusqu'où l'utilisateur doit aller pour voir la fenêtre contextuelle. De plus, vous pouvez définir l'apparence des pop-ups en fonction du temps passé par l'utilisateur sur le site.

Les mêmes exigences s'appliquent aux titres, aux textes de champs et aux boutons des fenêtres contextuelles qu'au contenu du CTA. Après tout, les pop-ups sont des éléments d’un appel à l’action dont le but est d’augmenter les vues/abonnés/prospects.

6. Meilleur moment pour afficher des pop-ups

Si nous parlons de tester les superpositions, le service SumoMe a collecté les données suivantes : aujourd'hui, le délai optimal est de 5 secondes après que le visiteur soit arrivé à la page de destination.

WhichTestWon donne des statistiques différentes. Lors des tests, l'apparition des superpositions a été vérifiée 15, 30 et 45 secondes après l'atterrissage de l'utilisateur, et la première option a montré le résultat optimal : l'apparition d'une fenêtre après 15 secondes est 11% plus efficace que l'option avec 30 secondes , et 50 % plus efficace que l'option avec 45 secondes après l'atterrissage .

Mais rappelez-vous : il n’y a pas de moment idéal pour qu’une fenêtre apparaisse, car des tests sont nécessaires dans chaque cas spécifique. Cela est également vrai pour la question de la fréquence des pop-ups. En termes simples, les statistiques provenant des ressources d'autres personnes peuvent vous motiver à faire vos propres tests, mais ne doivent pas être un objet d'imitation - de test.

Aujourd'hui, nous allons parler de la façon de créer votre propre fenêtre contextuelle pour votre site Web. Maintenant cette méthode est très populaire, mais la plupart des solutions pour sa mise en œuvre sont payantes. Un exemple de fenêtre pas très belle (mais ce n'est qu'un exemple) à l'intérieur d'un poteau...

Dans cet article, nous apprendrons comment créer une fenêtre contextuelle comme celle-ci. Simple, rapide, efficace et surtout gratuit !

Toute fenêtre contextuelle se compose essentiellement de deux parties. La première consiste à assombrir le contexte général. La seconde est la fenêtre elle-même. La fenêtre, quant à elle, est généralement divisée en un titre, un texte et un formulaire d'abonnement. Préparons la base de notre fenêtre en tenant compte de la structure spécifiée.

Nous avons:
fs_popup_bg — Atténuation du site ;
fs_popup — La fenêtre elle-même ;
fs_popup_head — Titre de la fenêtre ;
fs_content — Le contenu de la fenêtre, divisé en deux parties ;

Écrivons maintenant les styles nécessaires...

#fs_popup_bg ( z-index:9999; gauche:0; haut:0; position:fixe; largeur:100%; hauteur:100%; arrière-plan:rgba(0,0,0,0.9); ) #fs_popup (marge : 10 % 20 % ; position : 600 px ; bordure : 5px solide #FF0000 ; remplissage : 1px 10px 10px ; fs_content_left, .fs_content_right ( float : gauche ; remplissage : 5px : taille de police : 20 px ; famille de polices : Arial ; )

Jetons un coup d'œil rapide aux styles de notre fenêtre contextuelle.
#fs_popup_bg- indique que notre fond sera noir et presque opaque (0,9), sera situé dans le coin supérieur gauche et occupera toute la surface de l'écran. Dans ce cas, la profondeur de l'élément, ou plutôt son élévation au-dessus des autres éléments, sera très grande (nettement supérieure aux autres).
#fs_popup- indique que la fenêtre sera un niveau au-dessus de l'arrière-plan (sinon nous ne la verrions pas). Ses dimensions seront de 600px sur 300px avec des coins arrondis et une bordure rouge.
.fs_content_left, .fs_content_right- nous indique que les blocs sont appuyés vers la gauche (nécessaire à leur emplacement au même niveau), ils ont des retraits et la police Arial.

Remplissons notre fenêtre de contenu :

Fermer Dans cet article, nous apprendrons comment créer une fenêtre contextuelle comme celle-ci. Simple, rapide, efficace et surtout gratuit ! Dépêchez-vous, entrez votre E-Mail et recevez un tas de!*

informations utiles
Votre e-mail :

* - Ce champ n'est pas actif. En cliquant sur le bouton "S'abonner", vous acceptez l'utilisation de votre adresse à des fins d'envoi massif de matériel publicitaire. Et vous léguez également votre voiture, votre appartement et 10 % de vos revenus à l'auteur du site.

#fs_popup_bg ( z-index:9999999999998; gauche:0; haut:0; position:fixe; largeur:100%; hauteur:100%; arrière-plan:rgba(0,0,0,0.9); ) #fs_popup (marge : 10 % 20 % ; z-index : 99999999999 ; largeur : 600 px ; bordure : 5 px solide #FF0000 ; arrière-plan : 1px 10px 10px ; décoration de texte : souligner ; ) .fs_popup_head a:hover ( curseur : pointeur ; décoration de texte : aucun ; ) .fs_content_left, . ) .fs_content_left ( largeur : 370 px ; couleur : #FFF ; taille de police : 17 px ; hauteur de ligne : 17 px ; famille de polices : Arial ; ) .fs_content_right ( largeur : 200 px ; couleur : #FFFF00 ; ) .fs_content_right petit ( police -taille : 7 px ; hauteur de ligne : 7 px ; ) .fs_content_right entrée (marge : 5 px ; largeur : 190 px ; couleur : #000 ; ) .fs_ok ( bordure : 1 px solide #FF0000 ; rayon de bordure : 10 px ;

hauteur : 35px ; arrière-plan : #FFFF00 ; curseur : pointeur ;
couleur : #000 ;
)
C'est essentiellement tout. Comme on peut le voir de Exemple JavaScript pour une fenêtre popup, elle est nécessaire essentiellement dans deux cas :

1) Événement de fermeture de notre fenêtre ;

2) Événement en cliquant sur le bouton « S'abonner » ;

Cela ne ferait pas de mal non plus de vérifier si cette fenêtre était affichée sur

cet ordinateur

. Travailler avec des cookies est tout à fait adapté à ces fins.

Examinons la création de fenêtres contextuelles modales, également appelées fenêtres contextuelles.

Nous avons parlé de la création de fenêtres pop-up (modales) dans WordPress.

hauteur : 100 % ;