Montrer une galerie de médias dans toutes les étapes d'une campagne UGC

Q : Comment inclure automatiquement la galerie de la campagne photo sous le contenu à chaque étape (sauf sur l'étape de la galerie elle-même) ?

R : Par défaut, la galerie photo n'apparaît que sur l'étape dédiée "Galerie". Cependant, vous pouvez la rendre visible sur d'autres étapes en l'injectant via une iframe. Cela se fait en créant un script personnalisé dans votre Bibliothèque de tags et en l'appliquant à votre campagne.

Voici le guide étape par étape sur la façon de configurer cela :

Étape 1 : Créer un nouveau tag dans la Bibliothèque de tags

1. Accédez à votre Bibliothèque de tags.
2. Créez un nouveau tag et donnez-lui un nom reconnaissable (par exemple, "Always-on Photo Gallery").
3. Collez le code JavaScript suivant dans la configuration du tag :

<script>
console.log('loading load-gallery-iframe ', location.hostname);
document.addEventListener('DOMContentLoaded', function() {
  const isGalleryPage = window.location.search.includes('galerie=true');
  const isInIframe = window.parent !== window;
  
  if (isGalleryPage && isInIframe) {
    console.log('gallery page loaded in iframe, hiding everything but the gallery...');
    // hide everything but gallery to prevent infinite nested headers/footers
    document.getElementById('responsive_tools').style.display = 'none';
    document.getElementById('bandeau_sup').style.display = 'none';
    document.getElementById('footer').style.display = 'none';
  } else if (!isGalleryPage) {
    console.log('campaign page (not gallery), loading gallery iframe...');
    const link = document.getElementById('s_gallery');
    const qualifioBox = document.getElementById('qualifioBox');
    
    if (link && link.href) {
      const iframe = document.createElement('iframe');
      iframe.src = link.href;
      iframe.style.width = '100%';
      iframe.style.height = '500px'; // Adjust as needed
      iframe.style.border = 'none'; // Remove border
      iframe.style.backgroundColor = 'transparent'; // transparent background
      iframe.setAttribute('allowtransparency', 'true');
      qualifioBox.appendChild(iframe);
    }
  }
});
</script>

Remarque : Vous pouvez ajuster la ligne iframe.style.height = '500px'; dans le code si vous avez besoin que la zone de la galerie soit plus ou moins haute.

Étape 2 : Inclure le tag dans votre campagne

1. Ouvrez votre campagne photo et naviguez jusqu'à l'étape Canaux.
2. Allez dans la section Tags pour le canal sélectionné.
3. Attachez le tag "Always-on Photo Gallery" nouvellement créé à votre campagne.

Une fois enregistré, le script vérifiera automatiquement si l'utilisateur se trouve sur l'étape de la galerie. Si ce n'est pas le cas, il ajoutera une version intégrée de la galerie en toute sécurité au bas du contenu de la campagne !