Recettes

Des extraits prêts à coller pour les cas d’usage les plus courants. Tous utilisent le global window.takt ; en npm, remplace par track(...).

Suivre la soumission d’un formulaire

<form id="contact">
  <!-- … -->
</form>

<script>
  document.getElementById('contact').addEventListener('submit', () => {
    window.takt('Contact', { props: { form: 'footer' } })
  })
</script>

Suivre un clic de bouton (CTA)

<button onclick="window.takt('CTA', { props: { label: 'hero' } })">
  Essayer gratuitement
</button>

Suivre un tunnel d’achat (étapes)

Émets un event par étape avec une prop step pour reconstituer l’entonnoir.

window.takt('Checkout', { props: { step: 'cart' } })
window.takt('Checkout', { props: { step: 'shipping' } })
window.takt('Checkout', { props: { step: 'payment' } })

Suivre du revenue e-commerce

window.takt('Purchase', {
  props: { plan: 'pro' },
  revenue: { amount: '29', currency: 'EUR' } // montant en chaîne
})

Bouton « Ne pas me suivre »

Laisse le visiteur reprendre le contrôle ; le choix persiste dans localStorage. Côté snippet, on bascule la clé takt_ignore directement (le global window.takt n’expose pas optOut/optIn).

<button id="optout">Désactiver la mesure</button>

<script>
  const btn = document.getElementById('optout')
  const sync = () => {
    const off = localStorage.getItem('takt_ignore') === '1'
    btn.textContent = off ? 'Activer la mesure' : 'Désactiver la mesure'
  }
  btn.addEventListener('click', () => {
    if (localStorage.getItem('takt_ignore') === '1') localStorage.removeItem('takt_ignore')
    else localStorage.setItem('takt_ignore', '1')
    sync()
  })
  sync()
</script>

Suivre les liens sortants et téléchargements

Pas de code : charge le bundle takt.auto.js et liste les captures voulues dans data-auto.

<script
  defer
  src="https://cdn.jsdelivr.net/npm/@vskstudio/takt-core/dist/takt.auto.js"
  data-domain="exemple.fr"
  data-auto="outbound,downloads"
></script>

Tu récupères alors un événement Outbound Link: Click et un événement File Download, chacun avec une propriété url. Ajoute tagged et 404 à la liste pour les deux autres captures, et data-downloads-ext="pdf,csv,epub" pour restreindre les extensions comptées.

Voir les extensions automatiques pour le détail de chaque capture, et la configuration pour les autres attributs du snippet.