Ajouter

Lorem ipsum

Lorem ipsum

A
A
A
Tracking

24 vues

4 min

Comment détecter la source de trafic et adapter le contenu dans Webflow ?

Apprenez à détecter la source de trafic d'un visiteur et adapter dynamiquement le contenu de votre page Webflow.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment détecter la source de trafic d'un visiteur et adapter dynamiquement le contenu de votre page Webflow.

Exemple

Simulez une source de trafic

SourceDétectionExemple
utm_sourceParamètre URL?utm_source=linkedin
Googledocument.referrergoogle.com dans le referrer
LinkedIndocument.referrerlinkedin.com dans le referrer
DirectReferrer videAccès direct ou signet
MetaAttribut data-traffic-sourceCSS ciblé par source

1. Ajoutez les éléments dynamiques dans Webflow

Créez un Text Block avec l'ID source-message pour le message dynamique. Pour afficher un élément uniquement pour une source précise, ajoutez le custom attribute data-show-source avec la valeur linkedin, google ou meta. Mettez ces éléments en display: none par défaut.

2. Ajoutez le script dans Footer code

(function() {
var params = new URLSearchParams(window.location.search);
var ref = document.referrer;
var source = params.get('utm_source') || '';

function getSource() {
if (source) return source.toLowerCase();
if (ref.includes('linkedin')) return 'linkedin';
if (ref.includes('twitter') || ref.includes('x.com')) return 'twitter';
if (ref.includes('google')) return 'google';
if (ref.includes('facebook') || ref.includes('instagram')) return 'meta';
if (ref === '') return 'direct';
return 'other';
}

var src = getSource();
document.body.setAttribute('data-traffic-source', src);

// Contenu dynamique selon la source
var messages = {
'linkedin': 'Bienvenue depuis LinkedIn ! Découvrez comment nous aidons les équipes B2B.',
'google': 'Vous nous avez trouvés sur Google. Voici ce que nous faisons.',
'meta': 'Bienvenue depuis nos annonces ! Voici notre offre.',
'direct': 'Bienvenue ! Voici ce que fait Gemeos.',
'other': 'Bienvenue sur Gemeos.'
};

var el = document.getElementById('source-message');
if (el) el.textContent = messages[src] || messages['other'];

// Afficher/masquer des éléments par source
document.querySelectorAll('[data-show-source]').forEach(function(el) {
var sources = el.dataset.showSource.split(',');
el.style.display = sources.indexOf(src) !== -1 ? '' : 'none';
});
})();

3. Personnalisation CSS par source

Le script ajoute un attribut data-traffic-source sur le body. Vous pouvez cibler les sources en CSS :

/* Dans un embed CSS global */
[data-traffic-source='linkedin'] .hero-cta { background: #0077b5; }
[data-traffic-source='google'] .promo-banner { display: block; }

bon à savoir

document.referrer est vide quand le visiteur arrive via HTTPS vers HTTP, via un lien dans une app (Slack, email natif) ou en direct. Le paramètre utm_source est plus fiable car vous le contrôlez. Combinez les deux : utm_source en priorité, referrer en fallback. Sur les campagnes email, ajoutez toujours utm_source=email pour une détection certaine.

Conclusion

Adapter le contenu à la source améliore la pertinence et le taux de conversion. Cas d'usage :

  • Message d'accueil personnalisé selon la campagne
  • CTA différent pour les visiteurs LinkedIn vs Google
  • Offre spéciale visible uniquement depuis une pub Meta

Source détectée sur votre session actuelle

data-traffic-source :

Détection...

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Publié le

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

Let’s f*****G GO !!

Prêt à faire décoller
votre activité  ?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...