Snapchat Ads Event Tracking

Event Tracking Overview

Events are user actions tracked on your website that help measure campaign performance and optimize ad delivery. Snapchat supports standard events for common actions and custom events for unique business needs.

Standard Events

E-Commerce Events

PAGE_VIEW

Fires when a user views any page. Automatically tracked when pixel loads.

// Basic PAGE_VIEW (automatic with pixel init)
snaptr('track', 'PAGE_VIEW');

// With optional parameters
snaptr('track', 'PAGE_VIEW', {
  'page_url': window.location.href,
  'page_title': document.title
});

When to use: Every page load (handled automatically by base pixel code).

VIEW_CONTENT

Fires when a user views a product, article, or content page.

snaptr('track', 'VIEW_CONTENT', {
  'item_ids': ['SKU_123'],
  'item_category': 'Electronics',
  'price': 99.99,
  'currency': 'USD',
  'description': 'Blue Widget Pro'
});

Implementation example (product page):

// On product page
document.addEventListener('DOMContentLoaded', function() {
  const productSku = document.querySelector('[data-product-sku]').value;
  const productPrice = parseFloat(document.querySelector('[data-product-price]').value);
  const productCategory = document.querySelector('[data-product-category]').value;

  snaptr('track', 'VIEW_CONTENT', {
    'item_ids': [productSku],
    'price': productPrice,
    'currency': 'USD',
    'item_category': productCategory
  });
});

Parameters:

ADD_CART

Fires when a user adds an item to their cart.

snaptr('track', 'ADD_CART', {
  'item_ids': ['SKU_123'],
  'price': 99.99,
  'currency': 'USD',
  'number_items': 1
});

Implementation example (add to cart button):

// Add to cart button handler
document.querySelector('.add-to-cart-btn').addEventListener('click', function(e) {
  const productSku = this.dataset.sku;
  const productPrice = parseFloat(this.dataset.price);
  const quantity = parseInt(document.querySelector('.quantity-input').value);

  snaptr('track', 'ADD_CART', {
    'item_ids': [productSku],
    'price': productPrice * quantity,
    'currency': 'USD',
    'number_items': quantity
  });

  // Proceed with actual add to cart logic
});

Parameters:

START_CHECKOUT

Fires when a user begins the checkout process.

snaptr('track', 'START_CHECKOUT', {
  'item_ids': ['SKU_123', 'SKU_456'],
  'price': 199.98,
  'currency': 'USD',
  'number_items': 2
});

Implementation example (checkout page):

// On checkout page load
window.addEventListener('load', function() {
  // Get cart data
  const cartItems = getCartItems(); // Your function to get cart data
  const itemIds = cartItems.map(item => item.sku);
  const total = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const itemCount = cartItems.reduce((sum, item) => sum + item.quantity, 0);

  snaptr('track', 'START_CHECKOUT', {
    'item_ids': itemIds,
    'price': total,
    'currency': 'USD',
    'number_items': itemCount
  });
});

PURCHASE

Fires when a user completes a purchase. Most critical event for conversion tracking.

snaptr('track', 'PURCHASE', {
  'price': 199.98,
  'currency': 'USD',
  'transaction_id': 'ORDER_12345',
  'item_ids': ['SKU_123', 'SKU_456'],
  'number_items': 2
});

Implementation example (order confirmation page):

// On order confirmation/thank you page
document.addEventListener('DOMContentLoaded', function() {
  const orderData = {
    id: 'ORDER_12345',
    total: 199.98,
    currency: 'USD',
    items: [
      { sku: 'SKU_123', quantity: 1, price: 99.99 },
      { sku: 'SKU_456', quantity: 1, price: 99.99 }
    ]
  };

  snaptr('track', 'PURCHASE', {
    'price': orderData.total,
    'currency': orderData.currency,
    'transaction_id': orderData.id,
    'item_ids': orderData.items.map(item => item.sku),
    'number_items': orderData.items.reduce((sum, item) => sum + item.quantity, 0)
  });
});

Parameters:

Important Notes:

• transaction_id must be unique for each order
• Use same transaction_id in both Pixel and CAPI for deduplication
• price should be the final total (including tax, shipping)
• Only fire once per purchase (not on page refresh)

Lead Generation Events

SIGN_UP

Fires when a user creates an account or signs up.

snaptr('track', 'SIGN_UP', {
  'sign_up_method': 'email',  // 'email', 'phone', 'google', 'facebook'
  'user_email': hashSHA256('user@example.com'),  // Hashed
  'user_phone_number': hashSHA256('+15551234567')  // Hashed
});

Implementation example:

// After successful signup
document.querySelector('.signup-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const email = document.querySelector('#email').value;
  const phone = document.querySelector('#phone').value;

  // Hash PII before sending
  snaptr('track', 'SIGN_UP', {
    'sign_up_method': 'email',
    'user_email': hashSHA256(email),
    'user_phone_number': hashSHA256(phone)
  });

  // Submit form
  this.submit();
});

function hashSHA256(data) {
  return CryptoJS.SHA256(data.toLowerCase().trim()).toString();
}

SUBSCRIBE

Fires when a user subscribes to a service or newsletter.

snaptr('track', 'SUBSCRIBE', {
  'price': 9.99,
  'currency': 'USD',
  'subscription_type': 'monthly'
});

Engagement Events

ADD_TO_WISHLIST

Fires when a user adds an item to their wishlist or favorites.

snaptr('track', 'ADD_TO_WISHLIST', {
  'item_ids': ['SKU_123'],
  'price': 99.99,
  'currency': 'USD'
});

SEARCH

Fires when a user performs a search.

snaptr('track', 'SEARCH', {
  'search_string': 'blue widgets',
  'item_category': 'Electronics'
});

Implementation example:

// Search form handler
document.querySelector('.search-form').addEventListener('submit', function(e) {
  const searchQuery = document.querySelector('.search-input').value;

  snaptr('track', 'SEARCH', {
    'search_string': searchQuery
  });
});

SAVE

Fires when a user saves an item, article, or content.

snaptr('track', 'SAVE', {
  'item_ids': ['ARTICLE_123'],
  'description': 'How to Track Conversions'
});

App Events (for websites promoting apps)

APP_INSTALL

Fires when tracking app installations from web.

snaptr('track', 'APP_INSTALL', {
  'app_id': 'com.example.app',
  'platform': 'iOS'  // or 'Android'
});

APP_OPEN

Fires when tracking app opens.

snaptr('track', 'APP_OPEN', {
  'app_id': 'com.example.app'
});

Custom Events

Create custom events for actions specific to your business that don't fit standard events.

When to Use Custom Events

• Unique business actions (e.g., "Quote_Requested", "Demo_Scheduled")
• Industry-specific events (e.g., "Property_Viewed" for real estate)
• Internal tracking needs

Custom Event Implementation

// Custom event syntax
snaptr('track', 'CUSTOM_EVENT_1', {
  'event_name': 'Demo_Scheduled',
  'demo_type': 'Product Demo',
  'value': 500,  // Potential deal value
  'currency': 'USD'
});

Example: Quote Request

document.querySelector('.quote-form').addEventListener('submit', function(e) {
  snaptr('track', 'CUSTOM_EVENT_1', {
    'event_name': 'Quote_Requested',
    'product_category': 'Enterprise Software',
    'company_size': 'Medium',
    'value': 5000  // Estimated deal value
  });
});

Example: Video Watched

// Track when user watches 75% of video
player.on('timeupdate', function() {
  const percentWatched = (player.currentTime / player.duration) * 100;

  if (percentWatched >= 75 && !videoTracked) {
    snaptr('track', 'CUSTOM_EVENT_1', {
      'event_name': 'Video_75_Percent',
      'video_title': 'Product Demo Video',
      'video_duration': player.duration
    });
    videoTracked = true;
  }
});

Custom Event Best Practices

1. Use descriptive event names - Make it clear what the event represents
2. Include relevant parameters - Add context about the action
3. Document custom events - Maintain a list of what each custom event tracks
4. Limit custom events - Use up to 10 custom events (Snapchat limit)
5. Configure in Events Manager - Set up custom events for use in campaigns

Advanced Event Tracking

Event Deduplication

Prevent duplicate events when using both Pixel and CAPI:

// Generate unique event ID
const eventId = `ORDER_${orderId}_${Date.now()}`;

// Pixel side
snaptr('track', 'PURCHASE', {
  'price': 99.99,
  'currency': 'USD',
  'transaction_id': orderId,
  'client_dedup_id': eventId  // Deduplication key
});

// Server side (CAPI) - use same eventId
// See Server-Side vs Client-Side guide for CAPI implementation

Conditional Event Firing

Fire events only when conditions are met:

// Only track purchase if value exceeds threshold
function trackPurchaseIfQualified(orderData) {
  const MIN_TRACKABLE_VALUE = 10.00;

  if (orderData.total >= MIN_TRACKABLE_VALUE) {
    snaptr('track', 'PURCHASE', {
      'price': orderData.total,
      'currency': 'USD',
      'transaction_id': orderData.id,
      'item_ids': orderData.items.map(item => item.sku)
    });
  } else {
    console.log('Order below minimum tracking threshold');
  }
}

Dynamic Event Parameters

Pull event data from page elements:

// Get data from page elements
function trackViewContentFromPage() {
  const productData = {
    sku: document.querySelector('[itemprop="sku"]')?.content,
    price: parseFloat(document.querySelector('[itemprop="price"]')?.content),
    currency: document.querySelector('[itemprop="priceCurrency"]')?.content,
    name: document.querySelector('[itemprop="name"]')?.content,
    category: document.querySelector('[data-category]')?.dataset.category
  };

  if (productData.sku && productData.price) {
    snaptr('track', 'VIEW_CONTENT', {
      'item_ids': [productData.sku],
      'price': productData.price,
      'currency': productData.currency || 'USD',
      'description': productData.name,
      'item_category': productData.category
    });
  }
}

// Execute on page load
document.addEventListener('DOMContentLoaded', trackViewContentFromPage);

Event Queuing for SPAs

Handle events in Single Page Applications:

// React/Next.js example
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function useSnapPixelTracking() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      if (typeof window.snaptr !== 'undefined') {
        window.snaptr('track', 'PAGE_VIEW');
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);
}

// Track product view in component
function ProductPage({ product }) {
  useEffect(() => {
    if (typeof window.snaptr !== 'undefined') {
      window.snaptr('track', 'VIEW_CONTENT', {
        'item_ids': [product.sku],
        'price': product.price,
        'currency': 'USD'
      });
    }
  }, [product]);

  return <div>{/* Product content */}</div>;
}

Event Testing & Validation

Using Snap Pixel Helper

1. Install Snap Pixel Helper Chrome Extension
2. Visit your website
3. Perform actions (view product, add to cart, purchase)
4. Click extension icon to see events fired
5. Verify event names and parameters

Using Test Events Tool

1. Go to Events Manager > Select your pixel
2. Click Test Events tab
3. Enter your website URL
4. Browse your site and trigger events
5. Verify events appear in Test Events
6. Check event parameters are correct

Console Debugging

// Enable Snap Pixel debug mode
snaptr('debug', true);

// This will log all pixel activity to console

// Monitor specific events
const originalTrack = window.snaptr;
window.snaptr = function(method, event, params) {
  if (method === 'track') {
    console.log('Snap Event:', event, params);
  }
  return originalTrack.apply(this, arguments);
};

Event Validation Checklist

## Event Tracking Checklist

### PAGE_VIEW
- [ ] Fires on all pages
- [ ] Fires on SPA route changes
- [ ] No duplicate fires on refresh

### VIEW_CONTENT
- [ ] Fires on product/content pages
- [ ] Includes item_ids parameter
- [ ] Price and currency included
- [ ] Category data present

### ADD_CART
- [ ] Fires when item added to cart
- [ ] Correct item_ids
- [ ] Price reflects quantity
- [ ] Number_items is accurate

### START_CHECKOUT
- [ ] Fires on checkout initiation
- [ ] Includes all cart items
- [ ] Total price is correct
- [ ] Item count matches cart

### PURCHASE
- [ ] Fires only on confirmation page
- [ ] Unique transaction_id per order
- [ ] Final price (with tax/shipping)
- [ ] Doesn't fire on page refresh
- [ ] All required params included

Common Event Tracking Issues

Issue: Events Not Appearing

Causes:

• Event fired before pixel loaded
• Wrong event name (case-sensitive)
• Missing required parameters
• JavaScript errors

Solutions:

// Wait for pixel to be ready
function trackWhenReady(event, params) {
  if (typeof snaptr !== 'undefined') {
    snaptr('track', event, params);
  } else {
    // Retry after delay
    setTimeout(() => trackWhenReady(event, params), 100);
  }
}

// Or use callback
snaptr('init', 'YOUR_PIXEL_ID', {}, function() {
  // Pixel ready - safe to track events
  snaptr('track', 'PAGE_VIEW');
});

Issue: Duplicate Events

Causes:

• Event fires on page refresh
• Multiple event handlers attached
• Both Pixel and CAPI without deduplication

Solutions:

// Prevent duplicate purchase tracking
let purchaseTracked = false;

function trackPurchase(orderData) {
  if (purchaseTracked) {
    console.log('Purchase already tracked');
    return;
  }

  snaptr('track', 'PURCHASE', {
    'price': orderData.total,
    'currency': 'USD',
    'transaction_id': orderData.id
  });

  purchaseTracked = true;

  // Store in sessionStorage to persist across reloads
  sessionStorage.setItem('purchase_tracked_' + orderData.id, 'true');
}

// Check on page load
const orderId = getOrderIdFromPage();
if (sessionStorage.getItem('purchase_tracked_' + orderId)) {
  console.log('Purchase already tracked for this order');
} else {
  trackPurchase(orderData);
}

Event Parameters Reference

Common Parameters

Currency Codes (ISO 4217)

Common currency codes:

• USD - US Dollar
• EUR - Euro
• GBP - British Pound
• CAD - Canadian Dollar
• AUD - Australian Dollar
• JPY - Japanese Yen

Next Steps

1. Implement data layer - See Data Layer Setup
2. Add Conversions API - See Server-Side vs Client-Side
3. Configure cross-domain - See Cross-Domain Tracking
4. Set up in Events Manager - Configure events for campaign use
5. Create audiences - Build custom audiences from events

Resources

• Events Manager
• Snap Pixel Helper
• Event Specifications
• Measurement Best Practices