Bienvenue sur le forum des lancements organisés de produits numériques ...


Auteur Sujet: Code Javascript pour cacher le contenu aux non-inscrits à sa liste email Aweber  (Lu 9539 fois)

Hors ligne FortTrafic

  • Modérateur Global
  • Membre Héroïque
  • *****
  • Messages: 1244
  • Karma: +19/-18
  • Sexe: Homme
  • Les Fameuses Vidéos
    • Voir le profil
    • CLUB AFFILIATION FACILE
Salut,

Sur le forum d'Aurélien Amacker on discutait du truc qui est installé sur le blog de Jean Rivière qui fait qu'il faut s'abonner à sa liste email pour voir certaines de ses vidéos. J'ai créé une version simplifié pour mon propre blog et je te donnerai le code plus loin, d'abord une petite explication de quoi il s'agit.

En réalité il n'y a pas besoin d'être abonné, c'est une illusion créée avec un cookie installé sur le navigateur du visiteur.

Jean Rivière avait commencé par protéger ses articles/vidéos comme ça et là actuellement il l'a modifié un peu car il s'est aperçu qu'en protégeant tout, son trafic ne suivait plus. Donc en général il fait une ou plusieurs vidéos en libre accès avec en dessous une vidéo numéro 2 protégée par ce système de cookie qui peut être la même pour plusieurs vidéos en libre accès..

Ces vidéos numéro 2 sont en fait des vidéos de vente pour un de ses produits. Donc il réserve l'accès aux pages de vente de ses produits à ses abonnés email.

Voilà ce qu'il se passe lorsque quelqu'un veut aller voir un de ses produits :

- La page vérifie si un cookie est installé sur le navigateur du visiteur.
- Si le cookie est installé, le visiteur peut voir la page de vente.
- Si le cookie n'est pas installé, la page affiche un formulaire de capture email (en fait 2 mais c'est le même) et si le visiteur entre son email le cookie est installé sur son navigateur et il est redirigé vers la page de vente.

Donc si ce même visiteur veut voir d'autres produits, il aura le cookie installé et donc verra directement la page de vente.

En réalité ce formulaire est un simple formulaire Aweber, on peut entrer n'importe quel email, ça fonctionne, pas besoin de confirmer son inscription.

On comprend donc bien que le but est de créer une illusion afin d'augmenter le nombre d'inscription à sa liste email et non de protéger absolument la page de vente des hackers en herbe :-)

J'ai recréé ce système pour mon blog mais en le modifiant pour que tout se passe au niveau du client, c'est à dire que c'est le navigateur du visiteur qui se charge de la "protection" et non mon serveur web, pour deux raisons :

- continuer d'utiliser le système de cache de Drupal, de sorte que la page HTML est toujours la même et ne change pas en fonction de la présence ou non du cookie sur le navgiateur du visiteur
- avoir le contenu de mes articles visibles par les moteurs de recherche, ce n'est qu'au moment de l'affichage que le formulaire ou l'article est caché en javascript.

Je te donne les détails de mon code dans le message suivant.

Hors ligne FortTrafic

  • Modérateur Global
  • Membre Héroïque
  • *****
  • Messages: 1244
  • Karma: +19/-18
  • Sexe: Homme
  • Les Fameuses Vidéos
    • Voir le profil
    • CLUB AFFILIATION FACILE
Il y a une petite préparation à faire dans le template / thème de son blog :

- créer un formulaire Aweber, prendre le code HTML et l'afficher sur la page entouré d'un div
- entourer le contenu de l'article d'un autre div

Ensuite tout le reste est géré en javascript...

Voici les divs avec leur nom (id) :

<div id="monformulaire">FORMULAIRE AWEBER</div>
<div id="moncontenu">CONTENU DE L'ARTICLE</div>

Code javascript

Le code javascript est simple, deux fonctions, une pour lire le cookie l'autre pour écrire le cookie :

<script>
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = '; expires='+date.toGMTString();
}
else var expires = '';
document.cookie = name+'='+value+expires+'; path=/';
}

function readCookie(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

var myParam = location.search.split('xyz=')[1] ? location.search.split('xyz=')[1] : '0';
if (myParam != '0') createCookie('mesabonnes', '1', 180);

if(!readCookie('mesabonnes')) {
 document.getElementById('moncontenu').style.display='none';
} else {
 document.getElementById('monformulaire').style.display='none';
}
</script>

C'est tout!
La seule chose qui reste à faire c'est en fait dans le code HTML du formulaire aweber, il faut insérer l'url de la page dans deux champs cachés en ajoutant l'argument xyz pour poser le cookie une fois que le visiteur a donné son email.
Comme j'utilise Drupal je le fais d'une certaine façon, si tu utilises wordpress ca sera différent, mais peu importe si vraiment ça te pose un problème pour trouver comment faire dans ton cas précis, demande-moi.
<input type="hidden" name="redirect" value="URL_DESTINATION" />
<input type="hidden" name="meta_redirect_onlist" value="URL_DESTINATION" />

Ces deux champs cachés sont les redirections dans le cas où l'email n'était pas déjà abonné à la lsite email et dans le cas où elle y était déjà.

Pour revenir au javascript, je t'explique en détail ce qu'il fait si tu ne lis pas le javascript couramment :-)
Je laisse de côté les deux fonctions, pas la peine de s'en occuper..
// dans myParam il y aura la valeur de l'argument xyz dans l'url, si il n'y a pas d'argument xyz dans l'url, myParam vaudra 0
// en fait on veut juste savoir s'il y a un argument xyz, pour savoir si on doit installer le cookie, on n'a pas besoin de sa valeur.
var myParam = location.search.split('xyz=')[1] ? location.search.split('xyz=')[1] : '0';
// si myParam est différent de 0 alors installer un cookie "mesabonnes" valable 180 jours.
if (myParam != '0') createCookie('mesabonnes', '1', 180);

// si le cookie n'est pas installé sur le navigateur du visiteur alors cacher le div avec le contenu
if(!readCookie('mesabonnes')) {
 document.getElementById('moncontenu').style.display='none';
// si le cookie est installé alors cacher le div avec le formulaire Aweber
} else {
 document.getElementById('monformulaire').style.display='none';
}

Voilà, j'ai expliqué assez rapidement mais complètement car c'est simple.

Si tu veux faire la même chose et que tu rencontres un problème, dis-le moi on verra comment on peut faire.

Si tu veux voir mon script en action tu peux aller sur mon blog http://www.forttrafic.com et cliquer sur un des articles, en principe tu ne verras que le formulaire Aweber, si tu entres un email tu sera redirigé sur le même article et cette fois il n'y aura plus le formulaire mais l'article.

En fait les deux sont présents dans le code HTML de la page, c'est pour ça je garde espoir que Google continuera de m'envoyer un peu de trafic et qu'il ne va pas considérer le contenu caché après coup en javascript comme un contenu inexistant :-)

Après tu peux ajouter d'autres trucs pour l'améliorer, par exemple j'ai ajouté un moyen simple pour ne pas utiliser ce système si dans mon article j'écris <!-- noformlock --> ce qui ne se voit pas car c'est un commentaire html, mais si j'ai mis ce bout de texte alors l'article est affiché normalement, pas de formulaire caché ni histoire de cookie, rien.

Hors ligne FortTrafic

  • Modérateur Global
  • Membre Héroïque
  • *****
  • Messages: 1244
  • Karma: +19/-18
  • Sexe: Homme
  • Les Fameuses Vidéos
    • Voir le profil
    • CLUB AFFILIATION FACILE
Salut, pour linstant le formulaire convertit a 15% mais je pense que cest sous evalue car a mon avis le formulaire est comptabilise a chaque affiche darticle puisquil est present dans le code html de chaque page.

Jai rajoute une ligne de code javascript pour poser le cookie quand un visiteur vient dun lien dans un de mes emails aweber, il suffit de voir le source html pour trouver la ligne supplementaire juste apres la verification de largument xyz.

Hors ligne FortTrafic

  • Modérateur Global
  • Membre Héroïque
  • *****
  • Messages: 1244
  • Karma: +19/-18
  • Sexe: Homme
  • Les Fameuses Vidéos
    • Voir le profil
    • CLUB AFFILIATION FACILE
Voilà la ligne de code que j'ajoute après la ligne qui vérifie la présence de l'argument xyz=
if (myParam == '0') myParam = location.search.split('awt_l=')[1] ? location.search.split('awt_l=')[1] : '0';

Autre chose, une modification qui pourrait être faite au script afin de ne pas afficher le formulaire dans le code html, pour pas que ça comptabilise des affichages même quand il n'est pas affiché, ca serait de l'afficher avec javascript avec un document.write()

De cette façon, aweber donnerait des stats plus précises, je vais peut être faire ce changement sur mon blog, pour l'instant je n'ai pas implémenté ce script ailleurs que sur mon blog, car la plupart de mes sites sont monétisé en partie avec adsense, et cacher le div comportant des blocs adsense ça ne va pas plaire à adsense, et il vaut mieux ne pas les contrarier, ils sont très susceptibles :-)
« Modifié: 24 juillet 2015 à 16:59:12 par FortTrafic »

Hors ligne FortTrafic

  • Modérateur Global
  • Membre Héroïque
  • *****
  • Messages: 1244
  • Karma: +19/-18
  • Sexe: Homme
  • Les Fameuses Vidéos
    • Voir le profil
    • CLUB AFFILIATION FACILE
Afficher un extrait de l'article aux visiteurs sans cookie
« Réponse #4 le: 24 juillet 2015 à 16:59:33 »
J'ai rajouté un extrait de l'article dans un div qui est caché si le cookie est présent.

Pour Drupal c'est ce code PHP, pour WordPress il faut savoir quel est la variable qui contient l'article, dans Drupal 7 c'est render($content) :

echo '<div id="monextrait">';
echo substr(strip_tags(render($content)), 0, 500);
echo "... <strong>FIN DE L'EXTRAIT...</strong><br>Pour lire la suite je te propose un échange gagnant-gagnant : ton adresse email contre l'accès libre à tous les articles de mon blog.";
echo '</div>';

Et donc j'ai rajouté une ligne de javascript pour cacher le div quand il y a le cookie :

document.getElementById('monextrait').style.display='none';

Ca permet de donner (peut-être) envie de lire la suite au lieu de montrer directement le formulaire, ce qui peut ressembler à une arnaque.

Ca permet également mine de rien d'avoir deux fois les X premiers caractères de l'article, ça rajoute toujours un peu de mots à la page pour Google :-)

J'ai mis 500 caractères d'extrait avec substr($variable, 0, 500), ça fait déjà quelques phrases.