# Codify your headless Shopify store

### Who Should Follow This Guide:

This guide is intended for developers and technical teams managing headless Shopify stores who want to implement accurate event tracking using Blotout. If your Shopify store uses a custom frontend (headless) or custom checkout, you must follow these instructions to ensure proper event tracking.

### Why Event Codification is Required

When a Shopify store is headless, the Blotout Shopify App cannot automatically track events from the website. Shopify’s standard web pixel and app-based tracking only work with traditional (non-headless) stores.\
**Result:** Custom event codification is required to ensure accurate tracking of user interactions and conversions.

### Event Codification Requirements

The events you need to implement depend on **whether your storefront or checkout is headless**.

#### Case 1: Headless Storefront with Shopify Checkout

If your **pre-checkout experience is headless** (custom frontend) and the **checkout is hosted by Shopify**, you must codify the following events on your website:

<table><thead><tr><th width="198.33984375">Event Name</th><th>Trigger</th></tr></thead><tbody><tr><td><strong>PageView</strong></td><td>Fired on every page load</td></tr><tr><td><strong>ViewContent</strong></td><td>Fired on product detail pages with product payload</td></tr><tr><td><strong>AddToCart</strong></td><td>Fired when a product is added to the cart</td></tr><tr><td><strong>CompleteRegistration</strong></td><td>Fired when a user completes account registration | optional event</td></tr><tr><td><strong>Lead</strong></td><td>Fires on submission of the footer or pop-up subscribe form</td></tr></tbody></table>

**Note:** These events must be triggered from your headless frontend and sent to Blotout with the appropriate payload.

#### Case 2: Fully Headless Checkout (Custom Checkout)

If **both your storefront and checkout are headless**, you must additionally codify checkout and purchase-related events.

<table><thead><tr><th width="178.87890625">Event Name</th><th>Trigger</th></tr></thead><tbody><tr><td><strong>InitiateCheckout</strong></td><td>Fired when the user lands on the checkout page</td></tr><tr><td><strong>AddShippingInfo</strong></td><td>Fired when shipping details are submitted</td></tr><tr><td><strong>AddPaymentInfo</strong></td><td>Fired when payment details are submitted</td></tr><tr><td><strong>Purchase</strong></td><td>Fired once the purchase is successfully completed</td></tr></tbody></table>

### SDK Initialization and Event Dispatching

Before sending any events or user data, you must **initialize the Edgetag SDK**.

Once initialized, use the **`tag` method** to:

* Send event (e.g., PageView, AddToCart, Purchase)

Use **data/user method** to:

* Send user information and attributes

#### Basic Flow

1. Initialize the Edgetag SDK
2. Call the `tag` method to send events
3. Send user data or PII separately using data/user methods

### Sending User Information

All user information must be sent using the methods below only.

To send user information, please follow the relevant integration guide based on your implementation method:

1. [**Native JavaScript**](https://docs.edgetag.io/implementation/browser/user-info)
2. [**NPM Package**](https://docs.edgetag.io/implementation/headless/user-info)
3. [**HTTP API**](https://docs.edgetag.io/implementation/http/data)

**Important:** Always send the [standard keys](https://docs.edgetag.io/implementation/browser/user-info/standard-keys) with the proper type; otherwise, the events will fail validation.

### Methods for Event Codification

There are multiple supported methods to implement event tracking:

1. [**Native JavaScript**](https://docs.edgetag.io/implementation/browser)
   * Directly trigger events using custom JavaScript in your frontend.
2. [**NPM Packages**](https://docs.edgetag.io/implementation/headless)
   * Use our official or supported NPM packages to simplify integration.
3. [**HTTP API Calls**](https://docs.edgetag.io/implementation/http)
   * Send events directly to our ingestion endpoint from your backend or frontend (recommended server-side).
4. [**Webhooks**](https://docs.edgetag.io/channels/webhook)

### Event Payload Requirements

Each event **must include the required payload**, such as:

* Product or cart data
* Order values and currency
* Event-specific metadata

Please follow the [**standard event payload**](https://docs.edgetag.io/overview/standard-events) **specification** outlined in our official integration guide to ensure proper processing and activation.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.edgetag.io/how-to/codify-your-headless-shopify-store.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.