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
| Source | Détection | Exemple |
|---|---|---|
| utm_source | Paramètre URL | ?utm_source=linkedin |
| document.referrer | google.com dans le referrer | |
| document.referrer | linkedin.com dans le referrer | |
| Direct | Referrer vide | Accès direct ou signet |
| Meta | Attribut data-traffic-source | CSS 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; }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...
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.










.avif)




