• Ajouter une publicité sur son site à la première visite de l'internaute

    image de l'aticle Ajouter une publicité sur son site à la première visite de l'internaute

    Afficher une publicité quand l'internaute arrive sur le site pour la première fois

    Aujourd'hui, un outil très intéressant pour promouvoir des opérations spéciales que le visiteur pourra voir dés son entré sur le site et cela qu'une seule fois.
    Pour se faire, il suffit tout d'abord d'enregistrer en session dés l'arrivé du visiteur sur le site une variable qui permettra d'identifier si le visiteur vient d'arriver ou pas.
    Si vous disposez d'un cms comme oscommerce vous pouvez avec une fonction de base du cms enregistrer en session une variable de votre choix puis la récupérer pour savoir si l'utilisateur est là pour la première fois ou pas.

    Comment faire ?

    Dans le fichier includes/application_top.php :
    recherchez la ligne :

    if (tep_session_is_registered('cart') && is_object($cart)) {


    juste avant insérez :

    // Ceci est créé pour savoir si le visiteur entre pour la première fois sur le site
      if (!tep_session_is_registered('premierevisite')) { 
       $premierefois = 'true';
       tep_session_register('premierevisite');
      } else {
       $premierefois = 'false';
      }


    Si vous ne disposez pas d'oscommerce, voir comment les variables sont misent en session sur votre cms ou vous pouvez aussi (peut conseillé si vous n'êtes pas le développeur de votre site) :

    if (!isset($_SESSION['premierevisite'])) { 
       $_SESSION['premierevisite'] = 'true';
      } else {
       $_SESSION['premierevisite'] = 'false';
      }


    Après avoir fait cela quand l'utilisateur entrera pour la première fois sur le site la variable "premierevisite" sera mise en session et elle aura comme valeur "true", ensuite si l'utilisateur rafraîchie la page la session "premierevisite" sera mise sur la valeur "false".

    Vous pourrez tester en php si la variable "premierevisite" est sur false ou true de la manière suivante :
    Pour oscommerce :

    if (tep_session_is_registered('premierefois') && $_SESSION['premierefois'] == 'true') {


    Sinon :

    if (isset($_SESSION['premierevisite']) && $_SESSION['premierevisite'] == 'true') {



    La div qui s'affichera sera affichée au-dessus de la page et son positionnement sera centrée quelque soit sa largeur et sa longueur, en voici un exemple pour oscommerce :

    <div id="background_premierefois"></div>
    <div id="boxes">
      <div id="dialog" class="window">
        <center>
       <?php echo tep_image('images/mon_image.jpg', 'Titre de mon image'); ?><br>
          // si vous n'avez pas oscommerce la ligne ci-dessus sera <img src="images/mon_image.jpg" title="titre de mon image">
          <a type="button" class="close">>> Accéder au site</a>
        </center>
      </div>
    </div>



    Maintenant voyons comment faire notre effet publicité comme sur les gros site genre www.rueducommerce.com.
    Vous devez dans votre page entre les balises <head></head> télécharger la gallerie ajax jquery. Pour faire cela utilisez google qui mets à votre disposition toute la galerie jquery pour que vous puissiez alléger votre serveur lors de l'appel à cette galerie, mettez donc entre les balises <head></head> :

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>


    Un peu de css pour mettre en forme votre div de pub :

    <style type="text/css">
    #background_premierefois { position: absolute; left: 0; top: 0; background-image: url('../../images/image_transparente.png'); min-width:100%; min-height: 100%; z-index:200; }
    #boxes .window {position:absolute;left:0;top:0;width:auto;height:auto;display:none;z-index:9999;padding:20px; }
    #boxes #dialog {width:auto;height:auto;padding:10px;color:#00008B;border:3px solid #fff;background-color:#000;}
    #boxes .close { cursor: pointer; float: right; margin: 10px 10px 0 0; }
    </style>
    


    L'exemple ci-dessus cache le dessous de la div avec une png transparent "image_transparente.png".
    Ensuite l'appel à jquery se fait comme ceci :

    <script type="text/javascript"> 
     jQuery.noConflict();
     
     jQuery(document).ready(function() { 
      var xH = jQuery(window).height();
      var xW = jQuery(window).width();
      jQuery("#dialog").css('top', xH/2-jQuery("#dialog").height()/2);
      jQuery("#dialog").css('left', xW/2-jQuery("#dialog").width()/2);
      jQuery("#dialog").fadeIn();         
      jQuery('.window .close').click(function () {
       jQuery("#background_premierefois").css('background', 'none');
       jQuery("#background_premierefois").css('display', 'none');
       jQuery("#background_premierefois").css('width', '0');
       jQuery("#background_premierefois").css('height', '0');
       jQuery('.window').hide();
      });  
     }); 
    </script>
    


    Grâce à cette fonction d'initialisation au chargement de la page la div est centrée sur la page, ensuite l'utilisateur appuie sur le lien de fermeture de la div on modifie le display, background et les dimensions pour que la page du dessous soit bien mise en premier plan.

    Pour voir un exemple visitez la page : http://www.accessoireslingerie.com.

Laissez un commentaire

* Votre e-mail ne sera jamais utilisé ou donné à un tiers

Recherche

Catégories

Newsletters

Archives