# Littledata Pixel

Ensure seamless and accurate data collection across your Shopify store and across headless storefronts with the **Littledata Pixel**.

Installed as a custom web pixel directly from your Shopify admin, this powerful solution works alongside Littledata's server-side tracking to fill gaps and improve reliability - so you never miss a critical conversion or customer journey.

### Key Benefits

* **Shopify Hydrogen and headless support** – Get consistent tracking across a headless storefront
* **Fully redundant tracking** – Safeguard your marketing data with both client-side and server-side tracking for key destinations
* **Custom landing page support** – Track customers across non-Shopify pages with ease
* **Accelerated checkout compatibility** – Track conversions seamlessly across Shop Pay and other accelerated checkout options

### How to add the Littledata Pixel

1. In the Littledata dashboard, you will see the **Littledata Pixel** widget.
   1. Click **Continue** to enter the setup.

      ![Add Advanced tracking script](/files/iQYsFaL1FS7S5TTBeM9o)
2. From your Shopify store admin, go to **Settings**, then **Customer events**

   ![Customer Events](/files/rcJmr70EdtpIb4FLxQxT)
3. Click **Add custom pixel**

   You will need to create a custom pixel called ***Littledata - Advanced Tracking***\
   Make sure the name is correctly spelled so we can detect it on your store.

   ![Create custom web pixel](/files/fFlucmUpkL4AXdMhH9bA)
4. **Configure the customer privacy settings**.

   Please select "*Not required"* and "*Data collected does not qualify as sale*" so that the Littledata pixel is able to load.\
   We manually handle consent according to the Customer Privacy API.

   For headless setups using cookie banners that are not automatically integrated with the Customer Privacy API, please refer to your cookie banner’s documentation on how to connect it manually.\
   If you’re on a custom storefront instead of Hydrogen, you’ll also need to include the Customer Privacy API asset. [Learn more](https://shopify.dev/docs/api/customer-privacy#installation-on-a-custom-storefront)

   ![Consent for web pixel](/files/cnI09kGXoSsyKAaKmjH4)
5. Please return to the Littledata app, copy the custom pixel code, and paste it into your newly created pixel under the **Code** section.
6. After that, click **Save** and then **Connect**.

   ![](/files/OQh4N2C1QpxsR2HcUBMM)

Once the **setup is complete**, you will be redirected to the Littledata dashboard, where the **Advanced tracking** "Connected" state will indicate that the pixel has been detected on the store.

### Redundant tracking setups

When added in addition to Littledata's server-side tracking, they allow for fully redundant tracking in destinations that support client and server-side events. Supported destinations include:

* [Meta Pixel](/integrations/facebook-capi/how-it-works-shopify-to-meta-conversions-api.md)
* [TikTok](/integrations/tiktok/how-it-works.md)
* [Pinterest](/integrations/shopify-to-pinterest/how-it-works.md)

Adding the Littledata Pixel gives you another reliable way to track events that might otherwise be lost, and follows the best practice for a [Redundant Setup](https://developers.facebook.com/docs/marketing-api/conversions-api/guides/end-to-end-implementation/).

#### What events are collected by the web pixel?

Littledata's custom web pixel improves tracking of checkout and post-purchase events across Social bundle integrations (Meta Conversions API or Mea CAPI for short, TikTok and Pinterest).

| Data destinations            | Web pixel event          | Meta event          | Description                                |
| ---------------------------- | ------------------------ | ------------------- | ------------------------------------------ |
| Meta CAPI, TikTok, Pinterest | product\_added\_to\_cart | AddToCart           | The addition of an item to a shopping cart |
| Meta CAPI, TikTok            | checkout\_started        | InitiateCheckout \* | The start of a checkout process            |
| Meta CAPI, TikTok            | payment\_info\_submited  | AddPaymentInfo \*   | Customer payment info submitted            |
| Meta CAPI, TikTok, Pinterest | checkout\_completed      | Purchase \*         | Completing the checkout / thank you page   |

\* An additional PageView will be sent with the event

### Troubleshooting

#### Littledata Pixel states

We run periodic checks to ensure that both the tracking script (via the app embed) and the custom web pixel are detected on your store.

1. Connected
   1. This means that the pixel is detected on your store; no action required on your end.
2. Not detected
   1. This means that our check failed to detect the pixel on your store.
   2. Click "Fix now" and follow the setup process.

{% hint style="info" %}
Make sure the pixel is correctly named "Littledata - Advanced Tracking".
{% endhint %}

#### How to check if the web pixel has loaded

Go to your newly created pixel — **Littledata - Advanced tracking** — in the Customer events tab and click on test to open the custom pixel on your website.

![](/files/nEufSXYBXA1jLXo8QXme)

To view which events are loading, visit each page that you want to test the pixel for, and review the Pixel helper dialog to ensure that the event was successfully subscribed to and that the callback function was successful.

![](/files/NIeSnkOmB2lIDAzG2616)

#### How to reconnect the pixel

If you don't see the pixel firing, one of your colleagues may have disconnected the pixel. You need to go to your Shopify Customer events, check for the **Littledata - Advanced Tracking**, click on the three dots on the right, and click **Connect**. That's it!

![reconnect pixel](/files/23KD5ra7gVMJQySlFRTB)


---

# 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://help.littledata.io/sources/shopify/littledata-pixel.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.