Demarrage

Configuration du script

Toutes les options et attributs disponibles du script de suivi

Le script de suivi Flowsery Analytics prend en charge plusieurs attributs data pour personnaliser le comportement du suivi. Ce guide couvre toutes les options de configuration disponibles.

Nouveau sur Flowsery Analytics ?

Commencez par le guide d'installation pour ajouter le script de suivi a votre site web.

Attributs du script

ID du site web — data-fl-website-id (requis)

Votre identifiant unique de site web provenant de Flowsery Analytics.

Balise script de base
<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  src="https://analytics.flowsery.com/js/script.js"
></script>

Domaine — data-domain (requis)

Le domaine racine de votre site web. Utilise pour la gestion des cookies entre sous-domaines.

Suivi des sous-domaines

Par defaut, Flowsery Analytics suit tous les sous-domaines de votre domaine racine. Par exemple, si votre domaine racine est example.com, Flowsery Analytics fonctionne sur app.example.com, blog.example.com, shop.example.com, etc.

Noms d'hote autorises — data-allowed-hostnames (facultatif)

Liste de domaines supplementaires separes par des virgules pour le suivi inter-domaines.

  • Par defaut : Vide (pas de suivi inter-domaines)
  • Exemple : app.io,shop.example.com
  • Cas d'utilisation : Suivre les utilisateurs a travers differents domaines racines
Suivi inter-domaines
<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  data-allowed-hostnames="app.io,myapp.org"
  src="https://analytics.flowsery.com/js/script.js"
></script>

URL de l'API — data-api (facultatif)

Point de terminaison API personnalise pour l'envoi des evenements. Accepte une URL complete ou un chemin relatif.

  • Exemple : https://api.example.com/events ou /custom-events
  • Cas d'utilisation : Points de terminaison API personnalises, proxys d'analyse tiers ou configurations de proxy avancees

Si vous fournissez un chemin relatif, il est ajoute a votre domaine.

Detection automatique du proxy

Flowsery Analytics detecte automatiquement les configurations avec proxy. N'utilisez ceci que si vous avez besoin d'un chemin de point de terminaison personnalise ou si vous souhaitez envoyer des evenements a un serveur completement different.

Autoriser Localhost — data-local (facultatif)

Activez le suivi sur localhost pour le developpement et les tests. Accepte "true" ou "false". Par defaut : false.

Autoriser le protocole File — data-allow-file-protocol (facultatif)

Activez le suivi lors de l'ouverture de fichiers HTML directement dans un navigateur (protocole file://). Accepte "true" ou "false". Par defaut : false.

Mode debug — data-debug (facultatif)

Activez le mode debug pour permettre le suivi dans les iframes. Accepte "true" ou "false". Par defaut : false. Par defaut, Flowsery Analytics ne suit pas dans les iframes pour eviter le suivi en double.

Desactiver la console — data-disable-console (facultatif)

Desactivez toute la journalisation console du tracker Flowsery Analytics. Accepte "true" ou "false". Par defaut : false.

Desactiver les paiements — data-disable-payments (facultatif)

Desactivez le suivi automatique des paiements et l'attribution des revenus a partir des parametres URL (Stripe session_id, LemonSqueezy order_id, Polar checkout_id). Accepte "true" ou "false". Par defaut : false.

  • Cas d'utilisation : Lorsque vous utilisez l'attribution des revenus cote serveur pour eviter les evenements de paiement en double

Suivi manuel des paiements

Les appels manuels window.flowsery("payment", { email }) fonctionnent toujours lorsque cette option est activee. Seule la detection automatique a partir des parametres URL est desactivee.

Attributs des elements HTML

Ces attributs sont ajoutes aux elements HTML de votre page pour activer le suivi automatique.

Suivi des objectifs — data-fs-goal (facultatif)

Suivez les clics sur n'importe quel element comme objectif personnalise. Lettres minuscules, chiffres, tirets bas, tirets uniquement. Max 64 caracteres.

<button data-fs-goal="add_to_cart">Add to Cart</button>

Parametres d'objectif — data-fs-goal-* (facultatif)

Ajoutez des parametres personnalises aux evenements d'objectif. Le nom du parametre est derive du nom de l'attribut (kebab-case, converti en snake_case). Max 10 parametres par evenement. Noms de parametres : max 64 caracteres. Valeurs : max 255 caracteres.

Objectif avec parametres
<button
  data-fs-goal="product_added"
  data-fs-goal-product-id="prod_123"
  data-fs-goal-product-name="Premium Plan"
  data-fs-goal-price="49">
  Add to Cart
</button>

Suivi du defilement — data-fs-scroll (facultatif)

Suivez automatiquement quand un element devient visible lors du defilement. Declencheur par defaut : l'element est visible a 50%. Memes regles de nommage que data-fs-goal.

<section data-fs-scroll="viewed_pricing">
  <h2>Pricing</h2>
</section>

Seuil de defilement — data-fs-scroll-threshold (facultatif)

Personnalisez le seuil de visibilite pour le suivi du defilement. Nombre decimal entre 0 et 1. Par defaut : 0.5 (50% de l'element visible). Valeurs courantes : 0.1 (10%), 0.5 (50%), 0.9 (90%), 1.0 (100%).

Delai de defilement — data-fs-scroll-delay (facultatif)

Ajoutez un delai en millisecondes avant que l'evenement de defilement ne soit suivi. Par defaut : 0 (pas de delai).

Suivi du defilement avec seuil et delai
<section
  data-fs-scroll="read_testimonials"
  data-fs-scroll-threshold="0.7"
  data-fs-scroll-delay="3000">
  <!-- Tracks only if element stays visible for 3 seconds -->
</section>

Parametres de defilement — data-fs-scroll-*

Ajoutez des parametres personnalises aux evenements de suivi du defilement, similaires a data-fs-goal-*.

Exemples de configuration courants

Environnement de developpement

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  data-local="true"
  src="https://analytics.flowsery.com/js/script.js"
></script>

Production avec proxy

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  src="/js/script.js"
></script>

Flowsery Analytics detecte automatiquement les configurations avec proxy. Aucun data-api n'est necessaire si vous proxifiez a la fois /js/script.js et /api/events.

Suivi inter-domaines

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  data-allowed-hostnames="app.io,shop.example.net"
  src="https://analytics.flowsery.com/js/script.js"
></script>

Utilisez la meme configuration sur tous les domaines suivis.

Suivi de la navigation par hash

Pour les applications monopage avec routage par hash :

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  src="https://analytics.flowsery.com/js/script.hash.js"
></script>

Resume des regles de validation

Noms d'objectifs et d'evenements

  • Caracteres : Lettres minuscules, chiffres, tirets bas (_), tirets (-)
  • Longueur : Maximum 64 caracteres

Noms de parametres personnalises

  • Caracteres : Lettres minuscules, chiffres, tirets bas (_), tirets (-)
  • Longueur : Maximum 64 caracteres
  • Conversion : les attributs kebab-case sont automatiquement convertis en snake_case

Valeurs de parametres personnalises

  • Longueur : Maximum 255 caracteres
  • HTML/XSS : Les caracteres dangereux sont automatiquement assainis
  • Limite : Maximum 10 parametres personnalises par evenement

Seuil de defilement

Nombre decimal, plage de 0.0 a 1.0, par defaut 0.5.

Delai de defilement

Entier (millisecondes), plage 0 ou superieur, par defaut 0.

Depannage

Le suivi ne fonctionne pas sur localhost

Ajoutez data-local="true" pour activer le suivi local.

Les objectifs personnalises ne se declenchent pas

Verifiez que le nom de votre objectif respecte les regles de validation : minuscules uniquement, pas d'espaces ni de caracteres speciaux (sauf _ et -), max 64 caracteres.

Le suivi inter-domaines ne fonctionne pas

Verifiez : meme data-fl-website-id sur tous les domaines, tous les domaines supplementaires listes dans data-allowed-hostnames, les utilisateurs cliquent sur les liens entre les domaines.

Le suivi du defilement ne se declenche pas

Problemes courants : l'element n'est pas assez longtemps dans le viewport, le seuil est trop eleve, IntersectionObserver n'est pas pris en charge.