What's the correct way to integrate WebPixel in Shopify?

Technical Q&A
1

Past couple days I spent trying to integrate Shopify’s Web Pixels with little success and I’m not sure what I’m doing wrong.

I’m looking to either send events to my own server or fetch events from wherever Pixel events are stored for analytics purposes within my app.

I followed the documentation and did the following:

  • Setup development store with checkout extensions preview enabled

  • Set API version to ‘unstable’

  • Scaffolded a web pixels extension, built it, deployed it, and published it successfully

  • Created a web pixel configuration for my shop through the graphql API

When I browse the store I see that the pixel loads within the network tab but I don’t see any events being sent to my server. My extension code looks like this:

import { register } from '@shopify/web-pixels-extension';

register(({ configuration, analytics, browser }) => {
console.log('configuration: ', configuration);
const pixelEndpoint = `https://ktruong008.ngrok.io/pixel?id=${configuration.accountID}`;

analytics.subscribe('all_events', (event) => {
  console.log('Page viewed', event);
  browser.sendBeacon(pixelEndpoint, event);
  });
});

What am I missing? Am I doing something wrong or is this not how WebPixels are supposed to be used?

2

same problem+, any updates?

3

Haven’t tested recently, probably not going to try again as I figured Pixels isn’t best for my use-case.

4

Hi there.
Can you @kyle_truong or anybody else give me a quick summary of how you send shopify standard events to my own app server? I had also understood that this is possible with the new customer events. Unfortunately, I haven’t had any success with this yet either, so I’d be very interested in your solution

5

@kyle_truong event data you can send to any platform. event code i can see it was correct.
to send your server what method are you using ?