Landing Analytics LogoLanding Analytics

Vue Installation

Add Landing Analytics to your Vue application using the Composition API

Installation with Composition API

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // Set the site ID and Public Token
      window.LANDING_ANALYTICS_SITE_ID = '${route.params.project_id}'
      window.LANDING_ANALYTICS_PUBLIC_TOKEN = '${user_account_token}'
      window.LANDING_ANALYTICS_DNT = '${domainSettings.collectDNT}'

      // Create and append the script element
      const script = document.createElement('script')
      script.src = 'https://unpkg.com/@landinganalytics-lib/tracker'
      script.async = true
      document.head.appendChild(script)

      // Log that the script was loaded
      console.log('Tracking script loaded')
    })
  }
}

A/B Testing Setup

To enable A/B testing, add the variants configuration before loading the script:

onMounted(() => {
  // Set up A/B testing variants
  window.LANDING_VARIANTS = [
    { name: 'ab', path: '/path#ab' },
    { name: 'ba', path: '/path#ba' }
  ]

  // Rest of the installation code...
})

Security Best Practices

  • Store your Public Token in environment variables
  • Disable CORS to ensure proper endpoint communication
  • Consider implementing Cloudflare Turnstile or Google reCAPTCHA to prevent malicious traffic