Façon d'afficher dynamiquement un div sans avoir d'abord charger sur la page?

J'ai un code simple qui affiche une div aléatoire à chaque fois, et cela fonctionne assez bien. Le problème est que les divs affichées de manière aléatoire sont des CTAs HubSpot, donc quand la page se charge, elle compte TOUT (j'ai actuellement 5) des CTAs comme étant regardés, alors qu'en réalité le spectateur n'en voit qu'un. Donc, il vis avec le rapport d'analyse.Façon d'afficher dynamiquement un div sans avoir d'abord charger sur la page?

Y at-il un moyen de stocker le code HTML dans une variable (qui fonctionne normalement, mais je rencontre des problèmes avec le script HubSpot dans la même variable) et afficher les variables ou stocker le code HTML inclus) ailleurs et l'avoir tiré de là et afficher au hasard? Ma connaissance de JS est très limitée, donc je ne sais pas comment s'y prendre.

Exemple de HTML

 <div class="random_cta"> 
     <article> 
      <img alt="Image Alt Text" src="image link here"> 
      <div class="text-container"> 
       <h3>Header Here</h3> 
       <p>Description here</p> 
       <p><!--HubSpot Call-to-Action Code --> 
<img alt="Image Alt Text" class="hs-cta-img" id="hs-cta-img" src="image source" style="border-width:0px;"></a></span> 
       <script charset="utf-8" src="https://js.hscta.net/cta/current.js"> 
       </script> 
       <script type="text/javascript"> 
       hbspt.cta.load(000000, '76b59fa5-f6d9-4818-bdb0-f91849b25499', {}); 
       </script></span><!-- end HubSpot Call-to-Action Code --></p> 
      </div> 
     </article> 
    </div>

Et cela se répète encore 4 fois la ligne.

Et voici la JS qui l'affiche au hasard:

<script> 
var random = Math.floor(Math.random() * $('.random_cta').length); 
$('.random_cta').hide().eq(random).show(); 
</script>

Source

2017-08-15 Erik B

Je dois dire, je ne sais pas ce HubSpot, mais en regardant l'extrait que vous avez fourni, il semble que vous chargez une bibliothèque 5 fois et appelez hbspt.cta.load(...) pour chacun de vos éléments. Tout d'abord, charger la bibliothèque une seule fois (dans le document <head> de votre document) suffirait. Ensuite, il suffit d'appeler la méthode de la bibliothèque après avoir appelé show() sur l'élément.

Edit: Puisque vous avez besoin d'une clé spécifique pour passer à votre méthode de bibliothèque, vous pouvez l'enregistrer comme un attribut de données dans votre code html pour chacun de vos divs:

<div class="random_cta" data-id="76b59fa5-f6d9-4818-bdb0-c1c1c1c1c1c1">...</div>

Et puis l'obtenir dans votre script :

var random = Math.floor(Math.random() * $('.random_cta').length); 
$('.random_cta').hide().eq(random).show(); 
var id = $('.random_cta').eq(random).data('id'); 
hbspt.cta.load(000000, id, {});

Espérons que cela aide.

Source

2017-08-15 21:23:42 lexith

Je vois, j'ai mis à jour ma réponse avec une approche possible. un autre serait de stocker une liste de ces identifiants dans votre script à la place en tant qu'attributs de données. – lexith

Façon d'afficher dynamiquement un div sans avoir d'abord charger sur la page?

Répondre

Questions connexes