affiliatebase-tracking
v1.0.3
Published
Lightweight affiliate tracking script for AffiliateBase - cookie-based attribution, conversion tracking, and Stripe integration
Maintainers
ggmeshReadme
affiliatebase-tracking
Lightweight, zero-dependency affiliate tracking script for AffiliateBase. Cookie-based attribution, conversion tracking, and automatic Stripe integration.
Features
- Cookie-based referral attribution (30-day default)
- Multiple tracking parameters (
?via=,?ref=,?affiliate=) - Automatic Stripe Buy Button / Pricing Table integration
- Conversion tracking via email
- Promo code attribution
- Cross-domain link tagging
- Automatic form integration
- Zero dependencies, pure JavaScript (~26KB)
Quick Start
Add this snippet to your website's <head> or before </body>:
<script>
(function (w, r) {
w._abq = w._abq || [];
w[r] =
w[r] ||
function () {
(w[r].q = w[r].q || []).push(arguments);
};
})(window, "affiliatebase");
</script>
<script
async
src="https://cdn.jsdelivr.net/npm/affiliatebase-tracking@1/src/index.js"
data-org-id="YOUR_ORG_ID"
></script>Replace YOUR_ORG_ID with your organization ID from the AffiliateBase dashboard.
That's it! The script will automatically track referrals from affiliate links.
Usage
Track Conversions
When a referred visitor signs up or makes a purchase, track the conversion:
affiliatebase("convert", { email: "[email protected]" });Check Attribution
affiliatebase("ready", () => {
if (window.AffiliateBase.referral) {
console.log("Referred by:", window.AffiliateBase.affiliate?.name);
}
});Stripe Integration
Add data-affiliatebase to your Stripe elements for automatic attribution:
<!-- Stripe Buy Button -->
<stripe-buy-button buy-button-id="buy_btn_xxx" publishable-key="pk_live_xxx" data-affiliatebase></stripe-buy-button>
<!-- Stripe Pricing Table -->
<stripe-pricing-table
pricing-table-id="prctbl_xxx"
publishable-key="pk_live_xxx"
data-affiliatebase
></stripe-pricing-table>Form Integration
Add data-affiliatebase="true" to forms to automatically include referral data:
<form data-affiliatebase="true" action="/signup" method="POST">
<input type="email" name="email" />
<button>Sign Up</button>
<!-- Hidden referral input auto-injected -->
</form>Configuration
Script Attributes
| Attribute | Required | Description |
| --------------------------- | -------- | --------------------------------------- |
| data-org-id | Yes | Your organization ID |
| data-debug | No | Set to "true" for console logging |
| data-affiliatebase-params | No | Custom URL parameters (comma-separated) |
URL Parameters
The script automatically detects these URL parameters:
?via=TOKEN(primary)?ref=TOKEN?affiliate=TOKEN?a=TOKEN?referral=ID(preload existing referral)
Example affiliate link: https://yoursite.com?via=john123
API Reference
Methods
// Track conversion
affiliatebase("convert", { email: "[email protected]" });
// Force attribution to specific affiliate
affiliatebase("source", "affiliate_token");
// Execute when loaded
affiliatebase("ready", () => {
console.log("Ready!");
});Global Object
Access attribution data via window.AffiliateBase:
window.AffiliateBase.referral; // Referral ID (UUID) or ""
window.AffiliateBase.affiliate; // Affiliate object or false
window.AffiliateBase.campaign; // Campaign object or false
window.AffiliateBase.coupon; // Coupon object or falseEvents
window.addEventListener("AffiliateBase.initialized", () => {
console.log("Tracking initialized");
});
window.addEventListener("AffiliateBase.tracked", (e) => {
console.log("Referral tracked:", e.detail.referral);
});TypeScript
Type definitions are included:
import "affiliatebase-tracking";
affiliatebase("convert", { email: "[email protected]" });
if (window.AffiliateBase.referral) {
console.log("Affiliate:", window.AffiliateBase.affiliate?.name);
}Browser Support
- Chrome/Edge (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- iOS Safari (last 2 versions)
License
MIT