Recipes

Ready-to-paste snippets for the most common use cases. All use the global window.takt; in npm, replace with track(...).

Track a form submission

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

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

Track a button click (CTA)

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

Track a checkout funnel (steps)

Emit one event per step with a step prop to reconstruct the funnel.

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

Track e-commerce revenue

window.takt('Purchase', {
  props: { plan: 'pro' },
  revenue: { amount: '29', currency: 'EUR' } // amount as a string
})

“Don’t track me” button

Let the visitor take back control; the choice persists in localStorage. On the snippet side, you toggle the takt_ignore key directly (the global window.takt does not expose optOut/optIn).

<button id="optout">Disable measurement</button>

<script>
  const btn = document.getElementById('optout')
  const sync = () => {
    const off = localStorage.getItem('takt_ignore') === '1'
    btn.textContent = off ? 'Enable measurement' : 'Disable measurement'
  }
  btn.addEventListener('click', () => {
    if (localStorage.getItem('takt_ignore') === '1') localStorage.removeItem('takt_ignore')
    else localStorage.setItem('takt_ignore', '1')
    sync()
  })
  sync()
</script>

Track outbound links and downloads

No code: load the takt.auto.js bundle and list the captures you want in data-auto.

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

You then get an Outbound Link: Click event and a File Download event, each with a url property. Add tagged and 404 to the list for the two other captures, and data-downloads-ext="pdf,csv,epub" to restrict which extensions count.

See the automatic extensions for the details of each capture, and the configuration for the other snippet attributes.