Un entonnoir de ventes est un outil de marketing en ligne conçu pour capturer les pistes du trafic et les convertir en clients. Ils ont tendance à convertir de 20% à 50% plus élevé que les pages Web ordinaires. Un entonnoir de ventes se compose généralement de pages de souscription, de formulaires de commande, de paniers d'achat, de pages de paiement et d'un logiciel de marketing par courrier électronique. Construire un tel système n'est pas une promenade dans le parc.

Aujourd'hui, pour créer un entonnoir de vente, il est courant d'acheter un plan d'abonnement mensuel auprès d'une plateforme de création d'entonnoir de vente. Le fournisseur le plus populaire facture actuellement entre 100 et 300 USD. Il existe d'autres options abordables. Cependant, vous pouvez rencontrer des difficultés ou des difficultés techniques avec l’ensemble des fournisseurs avec lesquels vous travaillez, certains plus graves que d’autres.

Si vous ne voulez pas payer pour un abonnement, vous devrez en créer un vous-même. Historiquement, coder votre propre entonnoir a été plus coûteux et plus long. Cependant, nous vivons en 2019. La technologie utilisée aujourd'hui par les développeurs Web s'est considérablement améliorée au cours des 10 dernières années.

Il est plus facile et plus rapide de créer et de déployer une application Web. Nous avons des tonnes de fournisseurs tiers qui permettent l'intégration de leurs plates-formes via des API distantes. Cela nous permet d'implémenter facilement des fonctionnalités lourdes sans avoir à écrire le code nous-mêmes.

L'avantage de posséder son propre code d'entonnoir signifie que votre entreprise sera plus résistante. Vous pouvez facilement changer de serveur si quelque chose ne fonctionne pas avec votre fournisseur. Vous pouvez également facilement développer votre activité en ligne sans rencontrer d'obstacles majeurs.

Dans ce didacticiel, je vais vous montrer comment coder votre propre entonnoir de ventes simple avec Vue, qui vous aidera à promouvoir un produit ou un service auquel vous vendez. les consommateurs. Nous allons créer un simple entonnoir de page squeeze permettant de collecter des pistes pour votre liste d’e-mail.

Conditions préalables

Cet article suppose que vous maîtrisez au moins:

Vous devez disposer d’une version moderne de Node.js et l'outil Vue CLI installé sur votre système. Au moment de la rédaction de cet article, Node v10.15.1 était le LTS actuel. La version actuelle de la CLI de Vue est la v3.4.1. Ma recommandation personnelle est d'utiliser nvm pour maintenir votre environnement Node.js à jour. Pour installer l'outil CLI Vue.js, exécutez la commande suivante:

 npm install @ vue / cli

À propos du projet

Vous pouvez accéder à toutes les sources de ce projet sur GitHub . Il y a aussi une démonstration en direct de ce projet. Nous allons utiliser Bootstrap-vue comme infrastructure CSS principale. Assurez-vous de lire la documentation si vous êtes nouveau dans ce cadre.

Pour ce projet, nous allons créer un entonnoir de deux pages comprenant une page d’inclusion – une page squeeze – et une page de remerciement. La configuration ressemblera à ceci:

La page d’inclusion capture l’adresse électronique d’un visiteur et l’enregistre sur une liste de diffusion. En même temps, le visiteur passe à la page suivante. C'est aussi simple que ça. Vous pouvez même le faire en utilisant simplement HTML, CSS et JavaScript. Pourquoi le faisons-nous même dans Vue.js?

La raison en est que nous pourrions vouloir construire différents types d’entonnoirs promouvant le même produit ou des produits différents. Nous ne voudrions pas répéter le même code que nous avons mis en place précédemment dans un autre entonnoir.

Vue.js est la solution parfaite qui nous permettra de construire des composants réutilisables faciles à gérer et à mettre à jour. De plus, nous pouvons conditionner nos composants et les publier dans un registre npm, le rendant disponible pour tous nos futurs projets d'entonnoir.

Pour publier notre entonnoir, nous devrons le faire dans un cadre tel que Nuxt.js . En effet, Vue.js est principalement une technologie de couche de visualisation. Nous pouvons installer notre bibliothèque d’entonnoir de ventes dans un projet Nuxt.js. Nuxt.js est plus un framework complet en ce sens qu'il permet au code de s'exécuter à la fois du côté serveur et du côté client. Il prend également en charge une multitude de fonctionnalités utiles telles que le référencement.

Malheureusement, il ne sera pas possible d'effectuer la plupart des étapes mentionnées ci-dessus dans un seul tutoriel. Au lieu de cela, nous allons créer le tunnel de deux pages. Je vais vous montrer comment concevoir les composants de manière à ce qu’ils soient faciles à réutiliser.

Ainsi, vous pourrez conditionner le projet plus tard et l’installer dans un autre projet en entonnoir. Je fournirai également des liens supplémentaires sur le conditionnement d'un projet Vue.js et son déploiement sur un serveur privé npm.

Avec ce plan en tête, poursuivons et commençons à construire notre projet de bibliothèque d'entonnoir!

Ouvrez une console et créez un nouveau projet Vue.

 vue create vue-sales-funnel

Utilisez les paramètres suivants:

• Fonctions : Babel, Routeur, Linter (facultatif)
• Mode historique du routeur : Oui
• Linter : ESlint + Plus joli, Lint sur Save, Lint et fixez sur commit (ou choisissez vos options préférées)
• fichiers de configuration : Dans des fichiers de configuration dédiés

Ensuite, installez Bootstrap-Vue : [19659010] cd vue-sales-sales
npm installer vue bootstrap-vue bootstrap

Ouvrez ensuite le projet dans votre éditeur favori. Si vous avez du code Visual Studio, vous pouvez le lancer comme ceci:

 code.

Mise à jour src main.js comme suit:

 import Vue Vue de "vue";
importer BootstrapVue de "bootstrap-vue";
importer l'application depuis "./App.vue";
importer le routeur de "./router";

importer "bootstrap / dist / css / bootstrap.css";
importer "bootstrap-vue / dist / bootstrap-vue.css";

Vue.config.productionTip = false;
Vue.use (BootstrapVue);

nouveau Vue ({
  routeur,
  rendre: h => h (App)
}). $ mount ("# app");

Ceci devrait configurer le framework CSS Bootstrap dans votre projet. Ensuite, mettez à jour src App.js comme suit:

Renommez les fichiers suivants comme suit:

• src / views / Home.vue => Optin.vue
• src / views / About.vue => Merci -you.vue

Remplacez le code existant dans src / views / Optin.vue comme suit:

Mettez à jour le code dans src router.js comme suit:

 import Vue Vue de "vue";
importer un routeur depuis "vue-router";
importer Optin de "./views/Optin.vue";
import Merci de "./views/Thank-you.vue";

Vue.use (routeur);

exporter le nouveau routeur par défaut ({
  mode: "historique",
  base: process.env.BASE_URL,
  itinéraires: [
    {
      path: "/",
      name: "optin",
      component: Optin
    },
    {
      path: "/thank-you",
      name: "thank-you",
      component: ThankYou
    }
  ]
});

Vous pouvez maintenant lancer votre serveur de projet à l'aide de la commande npm run serve . Ouvrez le navigateur et vérifiez les liens localhost: 8080 et localhost: 8080 / Thank-you fonctionnent comme prévu. Si tel est le cas, vous pouvez passer à la section suivante. Sinon, vérifiez votre travail.

Contenu du texte

Le premier composant que nous allons construire est un composant de texte. Nous pouvons facilement utiliser les balises

et

. Cependant, nous avons besoin d'éléments prédéfinis auxquels un style est déjà appliqué. Vous devez créer rapidement une page en 10 minutes ou moins sans penser au style.

Supprimez le composant src / components / HelloWorld.vue et créez TextComponent.vue à la place. . Copiez le code suivant:

Essayons-le en apportant les modifications suivantes dans src / views / Optin.vue :

Actualisez votre page. Vous devriez avoir quelque chose comme ceci:

Vous avez peut-être remarqué que l'étiquette du paragraphe rendra le contenu différemment. Nous utilisons l'attribut v-html pour permettre aux utilisateurs de passer du style HTML tel que et . Vous pouvez le tester en ajoutant cet extrait:

 <TextContent
  variante = "paragraphe"
  content = "Utilisez  * bold *  soulignez  et  italique  pour souligner des points importants."
/>

Nous avons créé un composant texte simple, livré avec un style prédéfini. La variante prop permet de déterminer le type de balise de texte à restituer. Nous avons également l’appui topMargin qui nous permettra d’espacer facilement les éléments de texte.

En supposant que le test fonctionne pour vous, passons au prochain défi. Supposons que nous ayons besoin de styles différents pour l’en-tête et le sous-en-tête. Nous avons besoin d'un moyen de demander au composant TextContent de modifier le style. Mettez à jour le code OptinForm.vue comme suit:

Nous avons ajouté un nouvel accessoire appelé theme . Nous devons déclarer ce nouvel accessoire dans TextComponent.vue . Mettez à jour le code comme suit:

Lorsque vous actualisez votre page, vous devriez avoir quelque chose comme ceci:

Dans cet exemple, nous avons déclaré plusieurs objets de style, red et blue . Les utilisateurs peuvent spécifier quel thème ils veulent utiliser. N'hésitez pas à ajouter plus de propriétés aux objets de style et à créer plus d'objets de style.

Si vous voulez aller plus loin, vous pouvez externaliser les objets de style de manière à les séparer du code. Vous pouvez créer quelque chose comme un fichier theme.css qui sera plus facile à personnaliser.

Regardons maintenant le composant suivant.

Formulaire d’inclusion

Le formulaire d’inclusion est où l'action de capture de plomb se produit. Nous demandons aux visiteurs de nous donner leur adresse électronique en échange d’une ressource précieuse qui les aidera.

Créez le fichier src / components / OptinForm.vue et insérez le code suivant:

Consultez le code, faites particulièrement attention aux accessoires utilisés. Pour montrer comment ce composant est utilisé, mettez simplement à jour src / views / Optin.vue comme suit:

Notez que nous avons remplacé le texte «put image here» par une balise d’image réelle. Nous avons également spécifié un événement @submit sur le composant OptinForm qui sera géré par la fonction handleSubmit . Si vous regardez le code OptinForm.vue vous remarquerez qu'un événement est déclenché via ce code: this. $ Emit ("submit", this.form);

Et c’est ainsi que nous avons découplé le composant OptinForm.vue . Nous pouvons facilement écrire un code personnalisé qui envoie une adresse électronique à la plate-forme de marketing par courriel de votre choix. Mon favori actuel est MailerLite. Voici leur documentation API expliquant comment ajouter un nouvel abonné.

Vous pouvez utiliser une bibliothèque telle que Fetch ou Axios pour envoyer les informations via le serveur REST. API. Si vous débutez dans cette catégorie, consultez le didacticiel Présentation d’Axios, un client HTTP populaire basé sur des promesses .

Actualisez votre navigateur et confirmez que la page d’inclusion fonctionne:

[1965].

Nous utilisons actuellement la validation HTML. La saisie d'une adresse e-mail valide devrait vous permettre d'accéder rapidement à la page . Pour le moment, cela ne ressemble pas à un. Corrigeons cela dans la section suivante.

Contenu vidéo

Avant de remplir la page Thank-You.vue nous devons créer la src / components / VideoContent.vue composant. Insérer le code suivant:

Le composant VideoContent nous permettra d'intégrer n'importe quelle vidéo de sites tels que YouTube et Vimeo. Vous devrez obtenir un lien intégré pour que cela fonctionne. L'URL intégrée de YouTube ressemble à peu près à ceci:

https://www.youtube.com/embed/xxxxxxxxx

Une fois le composant enregistré, vous pouvez commencer à travailler. sur src / views / Thank-you.vue . Remplacez tout le code existant par ceci:

Si vous actualisez la page http: // localhost: 8080 / thank-you vous devriez avoir la vue suivante:

[19659002] Puisque nous en avons terminé avec cette tâche, créons un autre composant un peu compliqué. Celui-ci ira à notre page Optin .

Composant Minuterie de compte à rebours

Un compte à rebours est un outil marketing populaire utilisé pour créer un sentiment d'urgence. Cela encourage le visiteur à agir maintenant avant que cette opportunité n'expire. Il existe principalement deux types de comptes à rebours:

1. Date limite pour une date spécifiée
2. Une heure fixe (généralement dans une heure ou quelques minutes) qui se réinitialise tous les jours ou lorsque la session est nouvelle

Dans ce cas, nous allons nous concentrer sur la construction du premier cas d'utilisation. Nous n'allons pas coder ce minuteur lui-même, mais en prendre un dans le registre npm. Vous devez d'abord quitter le serveur Vue.js. Installez-le comme suit:

 npm install vuejs-countdown

Créez ensuite le fichier src / components / Countdowntimer.vue et insérez le code suivant:

Ajoutez ensuite le composant CountdownTimer à la page src / views / Optin.vue :

Après avoir apporté les modifications, vous pouvez maintenant démarrer le serveur. Votre page devrait ressembler à ceci:

Si votre compte ne compte pas à rebours, changez la date et assurez-vous qu’elle est réglée à l’avenir. Finalisons maintenant le didacticiel.

Packaging and Publishing

Nous avons jusqu’à présent constitué une bonne base pour une bibliothèque d’entonnoirs de vente. Vous pouvez continuer à ajouter d'autres composants, chacun avec des options plus personnalisables. Le moment est venu de parler de l’emballage et du lancement d’un entonnoir prêt pour la production. Bien qu'il soit possible d'exécuter l'entonnoir que nous venons de créer à partir de notre projet Vue, il est préférable de le lancer dans un projet Nuxt.js.

Voici quelques liens utiles qui vous aideront à accomplir les tâches décrites précédemment:

.

J'espère que vous avez appris quelque chose d'utile avec ce tutoriel. En tant que développeur, vous avez un avantage sur les non-techniciens. Vous pouvez créer et lancer vos entonnoirs à un coût bien inférieur à celui que la plupart des spécialistes du marketing paient pour toute la durée de vie d’un service de création d’entonnoirs. Cela se traduira par des milliers de dollars d'économies chaque année.

De plus, vous pourrez vendre davantage de produits et de services logiciels au lieu d'utiliser un site Web standard. Faites-nous savoir via les médias sociaux si vous envisagez de créer une version open source d'un constructeur d'entonnoir de ventes qui bénéficiera à la communauté.

J'écris un code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.