Install Snap Pixel

Step-by-step guide to installing Snap Pixel on your website using direct installation, GTM, or platform integrations.

Installation Overview

The Snap Pixel is a JavaScript code snippet that tracks user behavior on your website. This guide covers multiple installation methods to suit different technical environments and skill levels.

Creating Your Snap Pixel

Step 1: Access Events Manager

Log in to Snapchat Ads Manager
Click on the menu icon (three lines) in the top left
Select Events Manager
Click + Create Pixel

Step 2: Configure Pixel Settings

Name your pixel (e.g., "Main Website Pixel")
Enter your website URL (e.g., https://www.example.com)
Click Create Pixel
Copy your Pixel ID (format: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)

Step 3: Get Pixel Code

In Events Manager, select your pixel
Click Set Up Pixel
Choose installation method:
- Email instructions to developer
- Manual installation
- Use a partner integration
- Google Tag Manager

Installation Methods

Method 1: Direct HTML Installation (Recommended for Simple Sites)

When to Use

Static HTML websites
Simple WordPress sites without plugins
Full control over website code
Small number of pages

Installation Steps

Copy the base pixel code:

<!-- Snap Pixel Code -->
<script type='text/javascript'>
(function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
{a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
a.queue=[];var s='script';var r=t.createElement(s);r.async=!0;
r.src=n;var u=t.getElementsByTagName(s)[0];
u.parentNode.insertBefore(r,u);})(window,document,
'https://sc-static.net/scevent.min.js');

snaptr('init', 'YOUR_PIXEL_ID', {
'user_email': '__INSERT_USER_EMAIL__'
});

snaptr('track', 'PAGE_VIEW');
</script>
<!-- End Snap Pixel Code -->

Replace YOUR_PIXEL_ID with your actual pixel ID
Paste into your website's <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>

  <!-- Snap Pixel Code - Place before closing </head> tag -->
  <script type='text/javascript'>
  (function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
  {a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
  a.queue=[];var s='script';var r=t.createElement(s);r.async=!0;
  r.src=n;var u=t.getElementsByTagName(s)[0];
  u.parentNode.insertBefore(r,u);})(window,document,
  'https://sc-static.net/scevent.min.js');

  snaptr('init', 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
  snaptr('track', 'PAGE_VIEW');
  </script>
  <!-- End Snap Pixel Code -->

</head>
<body>
  <!-- Your content -->
</body>
</html>

Add to all pages of your website (or add to a global header template)

For WordPress (Direct Edit)

// Add to your theme's header.php file
// Place before the closing </head> tag

<?php wp_head(); ?>

<!-- Snap Pixel Code -->
<script type='text/javascript'>
(function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
{a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
a.queue=[];var s='script';var r=t.createElement(s);r.async=!0;
r.src=n;var u=t.getElementsByTagName(s)[0];
u.parentNode.insertBefore(r,u);})(window,document,
'https://sc-static.net/scevent.min.js');

snaptr('init', '<?php echo get_option('snap_pixel_id'); ?>');
snaptr('track', 'PAGE_VIEW');
</script>
<!-- End Snap Pixel Code -->

</head>

Method 2: Google Tag Manager (Recommended for Dynamic Sites)

When to Use

Websites with frequent tracking changes
Multiple marketing tools to manage
Teams without developer resources
Need for version control and testing

Prerequisites

Google Tag Manager container installed on your website
Access to GTM account with edit permissions

Setup Steps

Step 1: Create Pixel ID Variable

In GTM, go to Variables > User-Defined Variables
Click New
Name it: "Snap Pixel ID"
Choose variable type: Constant
Value: YOUR_PIXEL_ID
Click Save

Step 2: Create Base Pixel Tag

Go to Tags > New
Name: "Snap Pixel - Base Code"
Tag Configuration: Custom HTML
Paste the following code:

<script type='text/javascript'>
(function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
{a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
a.queue=[];var s='script';var r=t.createElement(s);r.async=!0;
r.src=n;var u=t.getElementsByTagName(s)[0];
u.parentNode.insertBefore(r,u);})(window,document,
'https://sc-static.net/scevent.min.js');

snaptr('init', '{{Snap Pixel ID}}');
snaptr('track', 'PAGE_VIEW');
</script>

Triggering: Select All Pages
Click Save

Step 3: Create Event Tags (Example: Purchase)

Go to Tags > New
Name: "Snap Pixel - Purchase"
Tag Configuration: Custom HTML
Code:

<script>
snaptr('track', 'PURCHASE', {
  'price': {{Transaction Total}},
  'currency': '{{Transaction Currency}}',
  'transaction_id': '{{Transaction ID}}',
  'item_ids': {{Product SKUs}},
  'number_items': {{Product Count}}
});
</script>

Triggering: Create custom trigger (e.g., on purchase confirmation page)
Click Save

Step 4: Test and Publish

Click Preview in GTM
Visit your website
Verify tags fire correctly using Tag Assistant
Click Submit to publish changes
Add version name and description
Click Publish

GTM with DataLayer Integration

// Push to dataLayer when events occur
window.dataLayer = window.dataLayer || [];

// On product view
dataLayer.push({
  'event': 'viewContent',
  'productSku': 'SKU_123',
  'productPrice': 99.99,
  'productCategory': 'Electronics'
});

// On purchase
dataLayer.push({
  'event': 'purchase',
  'transactionId': 'ORDER_12345',
  'transactionTotal': 199.98,
  'transactionCurrency': 'USD',
  'transactionProducts': [
    {'sku': 'SKU_123', 'quantity': 2}
  ]
});

Then create GTM tags that fire on these custom events.

Method 3: Shopify Integration

When to Use

Running a Shopify store
Want automatic event tracking
Need product catalog sync
Prefer no-code solution

Installation Steps

Install Snapchat App
- Go to Shopify App Store
- Search for "Snapchat Ads"
- Click Add app
- Click Install app
Connect Snapchat Account
- Click Connect to Snapchat
- Log in with your Snapchat Business account
- Authorize the connection
- Select your Ads account
Configure Pixel
- Pixel will be automatically created and installed
- Or select existing pixel to use
Enable Features
- ✓ Automatic pixel installation
- ✓ Standard event tracking
- ✓ Product catalog sync
- ✓ Enhanced matching (email/phone)
Verify Installation
- Visit your store
- Use Snap Pixel Helper to verify pixel loads
- Check Events Manager for events

Shopify Manual Installation (Alternative)

If not using the app, you can manually add the pixel:

Go to Shopify Admin > Online Store > Themes
Click Actions > Edit code
Find theme.liquid
Paste pixel code before </head> tag
Save changes

Method 4: WooCommerce Integration

Option A: Using Plugin (Recommended)

Install Plugin
- In WordPress admin, go to Plugins > Add New
- Search "PixelYourSite" or "Snap Pixel"
- Click Install Now > Activate
Configure Plugin
- Go to plugin settings
- Enter your Snap Pixel ID
- Enable events: PAGE_VIEW, VIEW_CONTENT, ADD_CART, PURCHASE
- Save settings
Advanced Settings
- Enable Advanced Matching (hash email/phone)
- Configure Dynamic Events (product data)
- Set up Custom Events if needed

Option B: Manual Installation

// Add to functions.php in your theme

// 1. Add Snap Pixel to header
add_action('wp_head', 'add_snap_pixel', 10);
function add_snap_pixel() {
  ?>
  <script type='text/javascript'>
  (function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
  {a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
  a.queue=[];var s='script';var r=t.createElement(s);r.async=!0;
  r.src=n;var u=t.getElementsByTagName(s)[0];
  u.parentNode.insertBefore(r,u);})(window,document,
  'https://sc-static.net/scevent.min.js');

  snaptr('init', '<?php echo esc_js(get_option('snap_pixel_id')); ?>');
  snaptr('track', 'PAGE_VIEW');
  </script>
  <?php
}

// 2. Track view content on product pages
add_action('woocommerce_after_single_product', 'snap_track_view_content');
function snap_track_view_content() {
  global $product;
  ?>
  <script>
  snaptr('track', 'VIEW_CONTENT', {
    'item_ids': ['<?php echo esc_js($product->get_sku()); ?>'],
    'price': <?php echo $product->get_price(); ?>,
    'currency': '<?php echo get_woocommerce_currency(); ?>',
    'item_category': '<?php echo wp_strip_all_tags(wc_get_product_category_list($product->get_id())); ?>'
  });
  </script>
  <?php
}

// 3. Track add to cart
add_action('woocommerce_after_add_to_cart_button', 'snap_track_add_to_cart');
function snap_track_add_to_cart() {
  global $product;
  ?>
  <script>
  jQuery('.single_add_to_cart_button').on('click', function() {
    if (typeof snaptr !== 'undefined') {
      snaptr('track', 'ADD_CART', {
        'item_ids': ['<?php echo esc_js($product->get_sku()); ?>'],
        'price': <?php echo $product->get_price(); ?>,
        'currency': '<?php echo get_woocommerce_currency(); ?>'
      });
    }
  });
  </script>
  <?php
}

// 4. Track purchase on thank you page
add_action('woocommerce_thankyou', 'snap_track_purchase', 10, 1);
function snap_track_purchase($order_id) {
  $order = wc_get_order($order_id);
  $item_ids = array();

  foreach ($order->get_items() as $item) {
    $product = $item->get_product();
    $item_ids[] = $product->get_sku() ?: $product->get_id();
  }
  ?>
  <script>
  snaptr('track', 'PURCHASE', {
    'item_ids': <?php echo json_encode($item_ids); ?>,
    'price': <?php echo $order->get_total(); ?>,
    'currency': '<?php echo $order->get_currency(); ?>',
    'transaction_id': '<?php echo $order_id; ?>',
    'number_items': <?php echo $order->get_item_count(); ?>
  });
  </script>
  <?php
}

Method 5: React/Next.js Integration

Next.js App Router

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script id="snap-pixel" strategy="afterInteractive">
          {`
            (function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
            {a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
            a.queue=[];var s='script';var r=t.createElement(s);r.async=!0;
            r.src=n;var u=t.getElementsByTagName(s)[0];
            u.parentNode.insertBefore(r,u);})(window,document,
            'https://sc-static.net/scevent.min.js');

            snaptr('init', '${process.env.NEXT_PUBLIC_SNAP_PIXEL_ID}');
            snaptr('track', 'PAGE_VIEW');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  )
}

Track Route Changes

// app/components/SnapPixelPageView.tsx
'use client'

import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export function SnapPixelPageView() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    if (typeof window.snaptr !== 'undefined') {
      window.snaptr('track', 'PAGE_VIEW')
    }
  }, [pathname, searchParams])

  return null
}

// Add to layout.tsx
import { SnapPixelPageView } from './components/SnapPixelPageView'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <SnapPixelPageView />
        {children}
      </body>
    </html>
  )
}

Track Events in React Components

// utils/snapPixel.ts
export const snaptr = {
  track: (event: string, params?: Record<string, any>) => {
    if (typeof window !== 'undefined' && window.snaptr) {
      window.snaptr('track', event, params)
    }
  }
}

// In component
import { snaptr } from '@/utils/snapPixel'

function ProductPage({ product }) {
  useEffect(() => {
    snaptr.track('VIEW_CONTENT', {
      item_ids: [product.sku],
      price: product.price,
      currency: 'USD'
    })
  }, [product])

  const handleAddToCart = () => {
    snaptr.track('ADD_CART', {
      item_ids: [product.sku],
      price: product.price,
      currency: 'USD'
    })
    // ... add to cart logic
  }

  return (
    <button onClick={handleAddToCart}>Add to Cart</button>
  )
}

Verification Steps

1. Install Snap Pixel Helper

Install Snap Pixel Helper Chrome Extension
Visit your website
Click the extension icon
Verify:
- ✓ Pixel loads successfully (green checkmark)
- ✓ Pixel ID matches your pixel
- ✓ PAGE_VIEW event fires

2. Check Browser Console

// Open DevTools Console (F12)
// Verify pixel is loaded
typeof snaptr
// Should return: "function"

// Check pixel queue
snaptr.queue
// Should show tracked events

// Enable debug mode
snaptr('debug', true)
// Will log all pixel activity to console

3. Verify in Events Manager

Go to Events Manager
Select your pixel
Click Test Events tab
Enter your website URL
Click Open Website
Browse your site
Verify events appear in Test Events tool

4. Check Network Requests

Open DevTools > Network tab
Filter by "sc-static.net"
Reload page
Verify:
- scevent.min.js loads (Status 200)
- Event requests sent to tr.snapchat.com

Common Installation Issues

Issue: Pixel Not Loading

Symptoms:

Pixel Helper shows "No pixel found"
snaptr is not defined error in console

Solutions:

Verify pixel code is in <head> section
Check for JavaScript syntax errors
Ensure no ad blockers are active (test in incognito)
Verify Content Security Policy allows sc-static.net

Issue: Events Not Firing

Symptoms:

Pixel loads but events don't appear
Test Events shows nothing

Solutions:

Verify event code runs after pixel loads
Check event names are correct (uppercase)
Ensure required parameters are included
Wait 15-30 minutes for processing

Issue: Duplicate Pixels

Symptoms:

Pixel Helper shows multiple pixels
Events firing twice

Solutions:

Check for duplicate pixel code installations
Verify GTM doesn't have conflicting tags
Remove pixel from theme if using plugin

Security Best Practices

1. Use Environment Variables

// Never hardcode pixel ID in public repositories
// Use environment variables
snaptr('init', process.env.SNAP_PIXEL_ID);

2. Content Security Policy

Add to your CSP header:

Content-Security-Policy:
  script-src 'self' https://sc-static.net;
  connect-src 'self' https://tr.snapchat.com;
  img-src 'self' https://tr.snapchat.com;

// Wait for user consent before loading pixel
function loadSnapPixel() {
  if (userHasConsentedToMarketing()) {
    // Load pixel code
    snaptr('init', 'YOUR_PIXEL_ID');
    snaptr('track', 'PAGE_VIEW');
  }
}

// Check consent on page load
if (typeof window.cookieConsent !== 'undefined') {
  window.cookieConsent.on('accept', loadSnapPixel);
}

Next Steps

After successful installation:

Configure Event Tracking - See Event Tracking Guide
Set Up Data Layer - See Data Layer Setup
Implement Advanced Matching - Hash email and phone numbers
Add Conversions API - Set up server-side tracking
Test Thoroughly - Use Test Events tool before launching campaigns

Installation Overview

Creating Your Snap Pixel

Step 1: Access Events Manager

Step 2: Configure Pixel Settings

Step 3: Get Pixel Code

Installation Methods

Method 1: Direct HTML Installation (Recommended for Simple Sites)

When to Use

Installation Steps

For WordPress (Direct Edit)

Method 2: Google Tag Manager (Recommended for Dynamic Sites)

When to Use

Prerequisites

Setup Steps

GTM with DataLayer Integration

Method 3: Shopify Integration

When to Use

Installation Steps

Shopify Manual Installation (Alternative)

Method 4: WooCommerce Integration

Option A: Using Plugin (Recommended)

Option B: Manual Installation

Method 5: React/Next.js Integration

Next.js App Router

Track Route Changes

Track Events in React Components

Verification Steps

1. Install Snap Pixel Helper

2. Check Browser Console

3. Verify in Events Manager

4. Check Network Requests

Common Installation Issues

Issue: Pixel Not Loading

Issue: Events Not Firing

Issue: Duplicate Pixels

Security Best Practices

1. Use Environment Variables

2. Content Security Policy

3. Implement Consent Management

Next Steps

Resources