OutOfTheBlue Pulse Node.js SDK

Introduction

The OutOfTheBlue Pulse Node.js SDK enables third-party analytics for Shopify stores with a headless setup.

Purpose

For headless Shopify stores, the standard Shopify App Pixel cannot be used to gather customer events. This SDK bridges that gap by enabling the collection of standard customer events in headless setups.

Key Features

• Collects standard customer events as defined in the Shopify Web Pixels API documentation
• Designed specifically for headless Shopify store architecture
• Seamless integration with Node.js-based frontend applications

Getting Started

To begin using the OutOfTheBlue Pulse Node.js SDK, refer to our installation and setup guide in the following sections.

Installation

Install @out-of-the-blue-ai/pulse with npm

  npm i @out-of-the-blue-ai/pulse --save

OutOfTheBlue Pulse Integration Guide

Usage/Examples

There are two ways to push standard customer events to OutOfTheBlue Pulse:

• Using Hydrogen Analytics UI SDK
• Placing Pulse SDK in onClick() handlers (Coming Soon)

1. Using Hydrogen Analytics UI SDK

If the Hydrogen Analytics SDK is already installed in your frontend repository, integrating our SDK becomes much easier.

Step 1: Understand Hydrogen Analytics

Refer to the Hydrogen Analytics documentation for background information.

Step 2: Add Event Subscriptions

In the useEffect() hook, add subscriptions for the following events:

• page_viewed
• product_viewed
• product_added_to_cart
• checkout_started
• checkout_shipping_info_submitted
• payment_info_submitted
• checkout_completed

Step 3: Implement Pulse SDK

Here's how to integrate the Pulse SDK:

import { useAnalytics } from '@shopify/hydrogen';
import { useEffect } from 'react';
import { pulsePush } from "@out-of-the-blue-ai/pulse";

export function ThirdPartyAnalyticsIntegration() {
  const { subscribe } = useAnalytics();
  const { ready } = register('Third Party Analytics Integration');

  useEffect(() => {
    // Standard events
    const events = [
      'page_viewed',
      'product_viewed',
      'product_added_to_cart',
      'checkout_started',
      'checkout_shipping_info_submitted',
      'payment_info_submitted',
      'checkout_completed'
    ];

    events.forEach(event => {
      subscribe(event, (data) => {
        pulsePush(event, data, "customer_event");
      });
    });

    // Mark this analytics integration as ready
    ready();
  }, []);

  return null;
}

In this component, we use the pulsePush() function to send data to OutOfTheBlue Pulse whenever a subscribed event occurs.

2. Placing Pulse SDK in onClick() handlers

This feature is coming soon. Stay tuned for updates!

Need Help?

If you encounter any issues or have questions, please refer to our documentation or contact our support team.