Vue Example

Integrating InsightCore analytics into a Vue 3 application with Vue Router.

Setup

1. Install the Tag

Add the tag to your index.html (or equivalent entry file):

<script>
  var rspaq = rspaq || [];
  rspaq.push(['init', 'org_00000a1B2c3D4e5']);
</script>
<script async src="https://api.insightcore.retailsuccessplatform.com/api/v1/tag/rsp-analytics.js"></script>

The tag automatically detects Vue Router navigations via history.pushState — no router middleware is needed for page view tracking.

2. Create a Composable for Custom Events

// composables/useAnalytics.js
export function useAnalytics() {
  function trackEvent(eventType, properties = {}) {
    window.rspaq = window.rspaq || [];
    window.rspaq.push(['trackEvent', eventType, properties]);
  }

  function trackProductView(product) {
    trackEvent('product_view', {
      product_id: product.id,
      product_name: product.name,
      product_price: product.price,
      product_category: product.category
    });
  }

  function trackAddToCart(product, quantity = 1) {
    trackEvent('add_to_cart', {
      product_id: product.id,
      product_name: product.name,
      product_price: product.price,
      quantity
    });
  }

  function trackCheckout(cart) {
    trackEvent('checkout', {
      item_count: cart.items.length,
      cart_total: cart.total
    });
  }

  function trackPurchase(order) {
    trackEvent('purchase', {
      order_total: order.total,
      items: order.items.map(item => ({
        product_id: item.product_id,
        quantity: item.quantity,
        price: item.price
      }))
    });
  }

  function trackSearch(query, resultsCount = 0) {
    trackEvent('search', { query, results_count: resultsCount });
  }

  return {
    trackEvent,
    trackProductView,
    trackAddToCart,
    trackCheckout,
    trackPurchase,
    trackSearch
  };
}

Component Examples

Product Detail Page

<script setup>
import { onMounted } from 'vue';
import { useAnalytics } from '@/composables/useAnalytics';

const props = defineProps({
  product: { type: Object, required: true }
});

const { trackProductView, trackAddToCart } = useAnalytics();

onMounted(() => {
  trackProductView(props.product);
});

function handleAddToCart() {
  trackAddToCart(props.product, 1);
}
</script>

<template>
  <div>
    <h1>{{ product.name }}</h1>
    <p>${{ product.price }}</p>
    <button @click="handleAddToCart">Add to Cart</button>
  </div>
</template>

Search Component

<script setup>
import { ref } from 'vue';
import { useAnalytics } from '@/composables/useAnalytics';

const query = ref('');
const results = ref([]);
const { trackSearch } = useAnalytics();

async function handleSearch() {
  const response = await fetch(`/api/search?q=${encodeURIComponent(query.value)}`);
  results.value = await response.json();

  trackSearch(query.value, results.value.length);
}
</script>

<template>
  <form @submit.prevent="handleSearch">
    <input v-model="query" placeholder="Search products..." />
    <button type="submit">Search</button>
  </form>
</template>

Checkout Flow

<script setup>
import { useAnalytics } from '@/composables/useAnalytics';

const props = defineProps({
  cart: { type: Object, required: true }
});

const emit = defineEmits(['complete']);
const { trackCheckout, trackPurchase } = useAnalytics();

function startCheckout() {
  trackCheckout(props.cart);
}

async function completePurchase(paymentDetails) {
  const order = await submitOrder(props.cart, paymentDetails);

  trackPurchase(order);
  emit('complete', order);
}
</script>

<template>
  <div>
    <h2>Checkout</h2>
    <p>Total: ${{ cart.total }}</p>
    <button @click="startCheckout">Proceed to Payment</button>
  </div>
</template>

Server-Side Reporting (Admin Panel)

Use an API client to fetch analytics data from your Vue admin panel:

// services/insightcore.js
import axios from 'axios';

const client = axios.create({
  baseURL: 'https://api.insightcore.retailsuccessplatform.com/api/v1',
  withCredentials: false
});

export function setToken(token) {
  client.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

export function getOverview(from, to) {
  return client.get('/analytics/reports/overview', { params: { from, to } });
}

export function getTopPages(from, to) {
  return client.get('/analytics/reports/pages', { params: { from, to } });
}

export function getActiveVisitors() {
  return client.get('/analytics/realtime/active-visitors');
}

export function getTrafficSources(from, to) {
  return client.get('/analytics/reports/traffic-sources', { params: { from, to } });
}

export function getEcommerce(from, to) {
  return client.get('/analytics/reports/ecommerce', { params: { from, to } });
}

Dashboard Component

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { getOverview, getActiveVisitors } from '@/services/insightcore';

const overview = ref(null);
const activeVisitors = ref(0);
let pollInterval = null;

onMounted(async () => {
  const { data } = await getOverview('2026-03-01', '2026-03-26');
  overview.value = data.data;

  await refreshVisitors();
  pollInterval = setInterval(refreshVisitors, 10000);
});

onUnmounted(() => {
  clearInterval(pollInterval);
});

async function refreshVisitors() {
  const { data } = await getActiveVisitors();
  activeVisitors.value = data.data.active_visitors;
}
</script>

<template>
  <div v-if="overview">
    <div class="stat">
      <span class="label">Active Now</span>
      <span class="value">{{ activeVisitors }}</span>
    </div>
    <div class="stat">
      <span class="label">Total Visitors</span>
      <span class="value">{{ overview.total_visitors.toLocaleString() }}</span>
    </div>
    <div class="stat">
      <span class="label">Page Views</span>
      <span class="value">{{ overview.total_page_views.toLocaleString() }}</span>
    </div>
    <div class="stat">
      <span class="label">Bounce Rate</span>
      <span class="value">{{ overview.bounce_rate }}%</span>
    </div>
  </div>
</template>

---

Changelog

Date	Change
2026-03-26	Initial publication.