Client-Side Revenue Tracking

Track revenue events directly from your website's frontend using JavaScript. This method is quick, although it may be less reliable than server-side tracking due to potential ad-blockers or browser restrictions.

Basic Implementation

Use the versatailor function to track payment events. Simply call it when a purchase is completed:

// Track a payment event
window?.versatailor("payment", {
  email: "customer@example.com",
  amnt: 2999, // Amount in cents ($29.99)
});

Required Parameters

email

Customer's email address. Use "dummy@example.com" as a placeholder if you prefer not to include real emails.

amnt

Payment amount in cents (not dollars). For example: $29.99 = 2999, $5.00 = 500

Implementation Examples

E-commerce Checkout

// After successful payment
function onPaymentSuccess(paymentData) {
  window?.versatailor("payment", {
    email: paymentData.customerEmail,
    amnt: paymentData.totalAmountInCents,
  });

  // Redirect to success page
  window.location.href = "/thank-you";
}

React Component

import { useEffect } from "react";

function CheckoutSuccess({ paymentData }) {
  useEffect(() => {
    // Track payment when component mounts
    if (paymentData && paymentData.email) {
      window?.versatailor("payment", {
        email: paymentData.email,
        amnt: paymentData.amountInCents,
      });
    }
  }, [paymentData]);

  return (
    <div>
      <h1>Payment Successful!</h1>
      <p>Thank you for your purchase.</p>
    </div>
  );
}

Vue.js Component

export default {
  mounted() {
    // Track payment when component is mounted
    if (this.paymentData && this.paymentData.email) {
      window?.versatailor("payment", {
        email: this.paymentData.email,
        amnt: this.paymentData.amountInCents,
      });
    }
  },
};

Angular Component

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-checkout-success",
  template: "<h1>Payment Successful!</h1>",
})
export class CheckoutSuccessComponent implements OnInit {
  ngOnInit() {
    // Track payment when component initializes
    if (this.paymentData && this.paymentData.email) {
      (window as any)?.versatailor("payment", {
        email: this.paymentData.email,
        amnt: this.paymentData.amountInCents,
      });
    }
  }
}

Advanced Examples

Multiple Products

// Track multiple products in a single order
function trackOrder(orderData) {
  orderData.items.forEach((item) => {
    window?.versatailor("payment", {
      email: orderData.customerEmail,
      amnt: item.priceInCents,
      orderId: orderData.orderId,
      productId: item.productId,
      category: item.category,
    });
  });
}

Subscription Tracking

// Track subscription payments
function trackSubscription(subscriptionData) {
  window?.versatailor("payment", {
    email: subscriptionData.customerEmail,
    amnt: subscriptionData.amountInCents,
    orderId: subscriptionData.subscriptionId,
    productId: subscriptionData.planId,
    category: "subscription",
    currency: subscriptionData.currency,
  });
}

Important Notes

Important Notes:

• Always provide amounts in cents, not dollars
• The event type must be exactly "payment"
• Both email and amnt parameters are required
• Call this function only after payment is confirmed

Troubleshooting

Revenue not appearing?

Please contact us at support@versatailor.com

Best Practices

• Test thoroughly: Always test payment tracking in a development environment
• Handle errors gracefully: Don't let tracking failures break your payment flow
• Use consistent data: Ensure email and amount formats are consistent
• Track at the right time: Only track after payment is confirmed

Limitations

• Ad blockers: Some ad blockers may block client-side tracking
• JavaScript disabled: Won't work if JavaScript is disabled
• Network issues: May fail if there are network connectivity problems
• Privacy concerns: Some users may have tracking disabled

Next Steps

Now that you understand client-side tracking:

• Learn about server-side tracking
• Explore custom event tracking
• Get your API key