Conversion Tracking & Financial Metrics (Amount & Count)

12345678910111213141516171819
<!-- LShorter Universal Attribution Pixel -->
<script>
(function() {
  // 1. Extract clickId parameter (?ref=clk_... or ?clickId=clk_...)
  const params = new URLSearchParams(window.location.search);
  const clickId = params.get("ref") || params.get("clickId");
 
  if (clickId) {
    // 2. Persist in sessionStorage and a 30-day first-party cookie
    sessionStorage.setItem("lshorter_click_id", clickId);
    document.cookie = "lshorter_click_id=" + encodeURIComponent(clickId) + "; path=/; max-age=" + (30 * 86400) + "; SameSite=Lax";
 
    // 3. Automatically populate any hidden input fields in forms
    document.querySelectorAll('input[name="clickId"], input[name="lshorter_click_id"]').forEach(function(el) {
      el.value = clickId;
    });
  }
})();
</script>

123456789101112131415161718192021222324
"use client";
 
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
 
export function useLShorterAttribution() {
  const searchParams = useSearchParams();
  const [clickId, setClickId] = useState<string | null>(null);
 
  useEffect(() => {
    // Check URL search params first, fallback to session storage
    const paramClickId = searchParams.get("ref") || searchParams.get("clickId");
 
    if (paramClickId) {
      sessionStorage.setItem("lshorter_click_id", paramClickId);
      setClickId(paramClickId);
    } else {
      const stored = sessionStorage.getItem("lshorter_click_id");
      if (stored) setClickId(stored);
    }
  }, [searchParams]);
 
  return { clickId };
}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
import { NextRequest, NextResponse } from "next/server";
import { lshorter } from "@/lib/lshorter";
import Stripe from "stripe";
import crypto from "node:crypto";
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: "2023-10-16" });
const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET!;
 
// Helper: Gravatar from email
function getGravatarUrl(email?: string): string | undefined {
  if (!email) return undefined;
  const hash = crypto.createHash("md5").update(email.trim().toLowerCase()).digest("hex");
  return `https://www.gravatar.com/avatar/${hash}?s=200&d=identicon`;
}
 
export async function POST(req: NextRequest) {
  const rawBody = await req.text();
  const sig = req.headers.get("stripe-signature")!;
 
  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(rawBody, sig, endpointSecret);
  } catch (err: any) {
    return NextResponse.json({ error: `Webhook Error: ${err.message}` }, { status: 400 });
  }
 
  // Handle successful checkout payment
  if (event.type === "checkout.session.completed") {
    const session = event.data.object as Stripe.Checkout.Session;
 
    // 1. Extract clickId passed in session metadata or client_reference_id
    const clickId = session.metadata?.clickId || session.client_reference_id || undefined;
    const amountPaid = (session.amount_total || 0) / 100; // Convert cents to decimal dollars/euros
    const customerEmail = session.customer_details?.email || undefined;
    const customerName = session.customer_details?.name || undefined;
    const customerAvatar = session.metadata?.avatarUrl || getGravatarUrl(customerEmail);
 
    // 2. Report monetary conversion to LShorter API with customer avatar
    await lshorter.track.conversion({
      eventName: "purchase",
      amount: amountPaid, // e.g. 49.00
      currency: (session.currency || "USD").toUpperCase(),
      clickId: clickId,
      orderId: session.id,
      customer: {
        email: customerEmail,
        name: customerName,
        avatarUrl: customerAvatar, // Customer profile picture displayed in dashboard
      },
      customerAvatar: customerAvatar, // Top-level alias also supported
      metadata: {
        paymentIntent: session.payment_intent as string,
        customerCountry: session.customer_details?.address?.country,
      }
    });
 
    console.log(`Successfully attributed ${amountPaid} ${session.currency} to clickId ${clickId}`);
  }
 
  return NextResponse.json({ received: true });
}

12345678910111213141516171819202122232425262728293031
import { NextRequest, NextResponse } from "next/server";
import { lshorter } from "@/lib/lshorter";
 
export async function POST(req: NextRequest) {
  const order = await req.json();
 
  // Find clickId in Shopify cart note attributes
  const clickIdAttr = order.note_attributes?.find(
    (attr: { name: string; value: string }) => attr.name === "clickId" || attr.name === "lshorter_click_id"
  );
  const clickId = clickIdAttr ? clickIdAttr.value : undefined;
  const totalAmount = parseFloat(order.total_price); // e.g. 89.50
  const customerEmail = order.email;
  const customerAvatar = order.customer?.avatar_url || `https://www.gravatar.com/avatar/${customerEmail}?d=identicon`;
 
  await lshorter.track.conversion({
    eventName: "shopify_order",
    amount: totalAmount,
    currency: order.currency || "USD",
    clickId: clickId,
    orderId: String(order.id),
    customer: {
      email: customerEmail,
      name: order.customer ? `${order.customer.first_name} ${order.customer.last_name}` : undefined,
      avatarUrl: customerAvatar,
    },
    customerAvatar: customerAvatar,
  });
 
  return NextResponse.json({ status: "success" });
}

12345678910111213141516171819202122232425262728293031
import { lshorter } from "@/lib/lshorter";
import crypto from "node:crypto";
 
// 1. Helper function: Compute Gravatar URL from email
function getGravatar(email: string): string {
  const hash = crypto.createHash("md5").update(email.trim().toLowerCase()).digest("hex");
  return `https://www.gravatar.com/avatar/${hash}?s=200&d=identicon`;
}
 
// 2. Resolve avatar from OAuth session (NextAuth, Clerk, Supabase) or Gravatar
const userEmail = "alex.johnson@example.com";
const userAvatarUrl = session?.user?.image // NextAuth Google/GitHub profile picture
  || user?.imageUrl // Clerk Auth
  || getGravatar(userEmail); // Gravatar fallback
 
// 3. Track conversion with customer avatar
await lshorter.track.conversion({
  eventName: "purchase",
  amount: 49.00,
  currency: "USD",
  clickId: "clk_9921ab01",
  orderId: "ord_992812",
  customer: {
    name: "Alex Johnson",
    email: userEmail,
    avatarUrl: userAvatarUrl, // Photo displayed in real-time revenue telemetry
  },
  customerAvatar: userAvatarUrl, // Top-level alias
});
 
console.log("Conversion tracked with customer avatar:", userAvatarUrl);

12345678910111213
import { lshorter } from "@/lib/lshorter";
 
// Deduct a $49.00 customer refund
const refundResult = await lshorter.track.refund({
  orderId: "ch_9921823ab", // Same orderId passed during conversion
  amount: 49.00,
  currency: "USD",
  reason: "customer_requested_return",
  refundId: "re_3Nq..."
});
 
console.log("Updated tracked revenue:", refundResult.newTrackedRevenue, "USD");
console.log("Deducted amount:", refundResult.amountRefunded, "USD");

123456789101112131415161718192021222324
import { lshorter } from "@/lib/lshorter";
 
// Query financial telemetry for a marketing campaign
const roi = await lshorter.analytics.getRevenue("summer-sale-2026", {
  period: "30d",
  currency: "USD",
});
 
console.log("Total Clicks:", roi.totalClicks);
console.log("Unique Visitors:", roi.uniqueClicks);
console.log("Conversions Count:", roi.conversionsCount);
console.log("Conversion Rate:", roi.conversionRate.toFixed(2) + "%");
console.log("Tracked Revenue (Amount):", roi.trackedRevenue.toFixed(2), "USD");
console.log("Average Order Value (AOV):", roi.averageOrderValue.toFixed(2), "USD");
console.log("Earnings Per Click (EPC):", roi.epc.toFixed(2), "USD / click");
 
// Calculate Net Profit assuming $0.50 CPC advertising spend
const adSpend = roi.totalClicks * 0.50; // $1,250 ad spend
const netProfit = roi.trackedRevenue - adSpend; // $3,332 - $1,250 = $2,082
const roas = (roi.trackedRevenue / adSpend) * 100; // 266.5% Return on Ad Spend
 
console.log("Ad Spend:", adSpend.toFixed(2), "USD");
console.log("Net Profit:", netProfit.toFixed(2), "USD");
console.log("ROAS:", roas.toFixed(1) + "%");