How to use Rybbit with Shopify Analytics?

Would you like to better understand your customers, create custom funnels, goals and inspect user journeys? Then Rybbit paired with Shopify is the choice for you!

This guide provides a streamlined script to capture all essential e-commerce events and helps you onboard the Rybbit analytics.

Why Use This Method?

• High Performance: The script runs in a sandboxed environment, meaning it won't slow down your store or interfere with the customer experience.
• Privacy-First: This method doesn't rely on cookies and is GDPR-friendly by default, respecting your customers' privacy.
• Reliable Data: Events are captured reliably without interference from browser ad-blockers.
• No Third-Party Scripts: Keeps your storefront clean and lean.
• Get advanced CRO features: Add powerful features needed for better conversion rate optimization, including event-based goals, user flows to see customer journeys, and even session recordings to watch where users get stuck. You can see a full list on their features page.

Step 1: Get Your Rybbit Credentials

First, you need two pieces of information from your Rybbit dashboard.

1. Log in to your Rybbit account.
2. Navigate to your website's Settings → API Key and click Generate API Key.
3. Copy your API Key - it starts with rb_ - each site has their own API key.
4. Find your Site ID in your browser's URL bar. (For example, in https://app.rybbit.io/3461/main, the Site ID is 3461).

Step 2: Add the Custom Pixel in Shopify

Next, add the Rybbit pixel to your Shopify admin.

1. In your Shopify Admin, go to Settings → Customer events.
2. Click Add custom pixel.
3. Name it Rybbit Analytics and click Add.

Step 3: Paste the "Track All" Script

This is the most efficient approach. This single script subscribes to all standard Shopify events automatically, including any new ones Shopify adds in the future.

Paste the following code into the code editor:

// --- Configuration ---
// Replace these with your actual Rybbit credentials
const RYBBIT_API_KEY = 'rb_your_api_key_here';
const RYBBIT_SITE_ID = 'your_site_id_here';
// ---------------------

const RYBBIT_API_URL = 'https://app.rybbit.io/api/track';

// Helper function to send events to Rybbit API
async function sendRybbitEvent(event) {
    try {
        await fetch(RYBBIT_API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                api_key: RYBBIT_API_KEY,
                site_id: RYBBIT_SITE_ID,
                // There's 2 types supported by Rybbit
                type: event.name == 'page_viewed' ? 'pageview' : 'custom_event',
                // Context data
                pathname: event.context?.document?.location?.pathname,
                hostname: event.context?.document?.location?.hostname,
                page_title: event.context?.document?.title,
                referrer: event.context?.document?.referrer,
                user_agent: event.context?.navigator?.userAgent,
                language: event.context?.navigator?.language,
                screenWidth: event.context?.window?.innerWidth,
                screenHeight: event.context?.window?.innerHeight,
                querystring: event.context?.document?.location?.search,
                // Event data
                event_name: event.name,
                properties: JSON.stringify(event.data || {})
            })
        });
    } catch (error) {
        console.error('Rybbit tracking error:', error);
    }
}

// Subscribe to ALL standard Shopify events with one line
analytics.subscribe('all_standard_events', (event) => {
    sendRybbitEvent(event);
});

Step 4: Connect and Test

Shopify provides built-in testing tools for custom pixels. No need to mess with browser DevTools initially.

1. Click Save. Shopify will now prompt you to configure permissions.
2. Enable Analytics data (this is required).
3. Click Save again, and then click Connect.
4. To test it, click the three-dot menu next to your pixel and select Test pixel.
5. Browse your test storefront, add a product to your cart, and start a checkout. You should see events firing in the Shopify test panel.
6. Perform test actions:
   • Browse to a product page
   • Add items to cart
   • Remove items from cart
   • View collections
   • Start checkout
7. Log in to your Rybbit dashboard to confirm the events are arriving (this may take 1-2 minutes).

What You're Tracking (Automatically)

This simple script captures all essential e-commerce events and their data, including:

• checkout_completed
• checkout_started
• product_added_to_cart
• product_removed_from_cart
• product_viewed
• collection_viewed
• search_submitted
• payment_info_submitted
• ...and all other standard Shopify Analytics events.

It also automatically captures rich context data with every event, such as device, language, referrer, page path, and UTM parameters.

(Advanced) Tracking Events Manually

If you only want to track specific events or need to customize the data for each one, you can subscribe to events individually instead of using all_standard_events.

Script below only focuses on certain events we want to track with simplified properties so it's easier to

// Configuration - Replace these with your actual credentials
const RYBBIT_API_KEY = 'rb_your_api_key_here';
const RYBBIT_SITE_ID = 'your_site_id_here';
const RYBBIT_API_URL = 'https://app.rybbit.io/api/track';

// Helper function to send events to Rybbit API
async function sendRybbitEvent(event, properties = {}) {
    try {
        await fetch(RYBBIT_API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                api_key: RYBBIT_API_KEY,
                site_id: RYBBIT_SITE_ID,
                type: 'custom_event',
                pathname: event.context.document.location.pathname,
                hostname: event.context.document.location.hostname,
                page_title: event.context.document.title,
                referrer: event.context.document.referrer,
                user_agent: event.context.navigator.userAgent,
                language: event.context.navigator.language,
                screenWidth: event.context.window.innerWidth,
                screenHeight: event.context.window.innerHeight,
                querystring: event.context.document.location.search,
                event_name: event.name,
                properties: JSON.stringify(properties)
            })
        });
    } catch (error) {
        console.error('Rybbit tracking error:', error);
    }
}

// Subscribe to Shopify analytics events
analytics.subscribe('checkout_completed', (event) => {
    sendRybbitEvent(event, {
        line_items: event.data.checkout.lineItems,
        value: event.data.checkout.totalPrice
    });
});

analytics.subscribe('checkout_started', (event) => {
    sendRybbitEvent(event, {
        line_items: event.data.checkout.lineItems,
        value: event.data.checkout.totalPrice
    });
});

analytics.subscribe('product_viewed', (event) => {
    const productPrice = event.data.productVariant.price.amount;
    const productTitle = event.data.productVariant.title;

    sendRybbitEvent(event, {
        productPrice: productPrice,
        productTitle: productTitle,
    });
});

analytics.subscribe('collection_viewed', (event) => {
    sendRybbitEvent(event, {
        collection_title: event.data.collection.title,
    });
});

analytics.subscribe('product_added_to_cart', (event) => {
    sendRybbitEvent(event, {
        cartLine: {
            merchandise: {
                id: event.data.cartLine.merchandise.id,
                title: event.data.cartLine.merchandise.title,
                price: event.data.cartLine.merchandise.price.amount,
                product: {
                    id: event.data.cartLine.merchandise.product.id,
                    title: event.data.cartLine.merchandise.product.title,
                    vendor: event.data.cartLine.merchandise.product.vendor,
                    type: event.data.cartLine.merchandise.product.type,
                }
            },
            quantity: event.data.cartLine.quantity,
            totalAmount: event.data.cartLine.cost.totalAmount.amount
        }
    });
});

analytics.subscribe('product_removed_from_cart', (event) => {
    sendRybbitEvent(event, {
        cartLine: {
            merchandise: {
                id: event.data.cartLine.merchandise.id,
                title: event.data.cartLine.merchandise.title,
                price: event.data.cartLine.merchandise.price.amount,
                product: {
                    id: event.data.cartLine.merchandise.product.id,
                    title: event.data.cartLine.merchandise.product.title,
                    vendor: event.data.cartLine.merchandise.product.vendor,
                    type: event.data.cartLine.merchandise.product.type,
                }
            },
            quantity: event.data.cartLine.quantity,
            totalAmount: event.data.cartLine.cost.totalAmount.amount
        }
    });
});

What Gets Tracked

This implementation captures six essential e-commerce events automatically:

• Product Viewed - Fires when customers land on product pages. Captures product title and price, you can modify it with additional properties if needed.
• Collection Viewed -Tracks collection page visits with the collection title.
• Product Added to Cart -Logs cart additions with full product details including variant info, quantity, and price.
• Product Removed from Cart - Tracks cart removals with the same data structure as additions for comparison analysis.
• Checkout Started - Captures when customers begin checkout with line items and total cart value.
• Checkout Completed - Records successful purchases with final order details.

You can inspect which events are available and customize properties you want to track using Shopify docs

Understanding the Context Data

Every event automatically captures:

• User Agent: Browser and device information
• Language: User's language preference
• Screen Size: Viewport dimensions (innerWidth/innerHeight in logical pixels)
• Pathname & Hostname: Current page location
• Page Title: Document title
• Referrer: Previous page URL
• Query String: URL parameters including UTM codes

Context data is used to segment customers and allows you to dig deeper into analytical data. Product and cart data varies by event type and is passed in the properties field as JSON.

Read more on context data:

• Rybbit API Documentation explains which parameters are accepted
• Shopify Documentation explains what is provided in each event context - click on context to view all parameters.

Common Issues and Fixes

Events Not Showing Up

Check these first:

• API key and Site ID are correct - site id is not the id from the script!
• Pixel status shows "Connected" in Shopify

429 Rate Limit Errors

Rybbit limits requests to 20 per second per API key. If you're hitting this on a high-traffic store, consider:

• Implementing a client-side queue to batch events
• Using a server-side proxy for event forwarding

Extending the Implementation

Track Additional Events

Add more Shopify standard events by subscribing to them:

// Track search queries  
analytics.subscribe('search_submitted', (event) => {
    sendRybbitEvent(event, {
        search_query: event.data.searchResult.query
    });
});

See the full list of Shopify standard events.

Add Custom Properties

Enrich events with additional data:

analytics.subscribe('product_viewed', (event) => {
    sendRybbitEvent(event, {
        productPrice: event.data.productVariant.price.amount,
        productTitle: event.data.productVariant.title,
        // Custom properties
        productType: event.data.productVariant.product.type,
        vendor: event.data.productVariant.product.vendor,
        onSale: event.data.productVariant.compareAtPrice ? true : false,
        sku: event.data.productVariant.sku
    });
});

Filter Events Conditionally

Only track events that meet specific criteria:

analytics.subscribe('product_added_to_cart', (event) => {
    // Only track high-value items
    if (event.data.cartLine.merchandise.price.amount > 100) {
        sendRybbitEvent({...event, name: "high_value_product_added_to_cart"}, {
            // ... properties
        });
    }
});

Key Takeaways

When setting up Rybbit analytics on Shopify:

• Use the Web Pixels API for sandboxed, performant tracking
• Leverage event.context for automatic page and user data capture
• Structure your properties as JSON for complex event data
• Test thoroughly using browser DevTools before going live
• Monitor rate limits if your store has high traffic

Related content

• For more Shopify optimization tips, check out how to bypass metaobject loop limits.
• To learn how to run A/B tests check out our article on How to A/B Test Your Ecommerce Store?
• Learn more about ecommerce landing page optimization with Ecommerce Landing Page Optimization The Complete Masterclass
• Or discover more tools to increase conversion rates for your Shopify store with 27+ Shopify Conversion Rate Optimization Tools that actually work