Web Pixel can’t fetch to App Proxy (same-origin) - how do you handle env URLs (dev/staging/prod)?

Web Pixels
1

Hi, first time working with Shopify Web Pixels (app pixel extension). I just found out the pixel sandbox blocks fetch() to the shop’s same origin, so calling my App Proxy endpoint like /apps/... throws RestrictedUrlError.

How do you usually send events to your backend in this case?

I can fetch to my app domain instead, but I have 3 environments (dev/test/prod). If I hardcode the endpoint URL, I need to change it per env + redeploy, and I’m worried about deploying the wrong URL by mistake.

Is storing the endpoint URL in the pixel settings (shopify.extension.toml settings fields) a good approach? Or is there a recommended pattern?

Also, I’m not using Shopify CLI for local dev, I set things up manually. Not sure if that changes the recommended workflow.

2

Yes, the shopify.extension.toml settings fields is designed for shop specific configuration. You would be able to define a field such as endpoint_url and then configure it using the WebPixelCreate graphql mutation on a per shop basis. This is the intended usage of the fields component in the shopify.extension.toml

It’s generally recommended that you use the cli as it has a lot of tooling support specifically for managing dev vs production versions.

3

Thanks for your answer!