webPixelCreate Returns OAuth Scope Error

Retired Boards Appdev Graphql Basics And Troubleshooting
1

tl;dr

Creating a dev pixel extension but running Graph Mutation says scopes are missing. Confirmed scopes were added.

Issue

I’m trying to get a development instance of a web pixel app extension to work with my app and dev store.

I followed all of the steps in the “Getting started with web pixel app extensions” guide.

  • Steps 1 - 5 went smooth
  • I re Oauth’d my app with all the necessary scopes succesfully
  • Confirmed the .toml file has the scopes defined
  • Deployed and published the app;
  • Confirmed app is using 2022-10 API version

On my dev shop, it shows installed and the pixel is listed under “Apps” in Customer Events.

Step 6 of the guide says to run a mutation to update the field that is defined in the example code. When I run the mutation I get:

Access denied for webPixelCreate field. Required access: `write_pixels` access scope. Also: The app requires read_customer_events access scope and user access permission.",

However, doing a GET to the admin scopes API endpoint it returns

{
	"access_scopes": [
		{
			"handle": "write_pixels"
		},
		{
			"handle": "read_customer_events"
		},
		{
			"handle": "read_products"
		},
		{
			"handle": "read_pixels"
		}
	]
}

So the scopes are there. Visiting my dev shop I don’t see any of my pixel code loaded - even when just adding a console.log, nothing appears in console.

Troubleshooting

I’ve uninstalled/reinstalled my app.

Verified API version is 2022-10.

Confirmed correct scopes are authorized.

Confirmed pixel code is asking for correct scopes in .toml file

Tried setting scopes as ENV values as well.

Dev Pixel Code

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

console.log('Loading extension...');

register(({ configuration, analytics, browser }) => {

  console.log('registered...');

  analytics.subscribe('page_viewed', (event) => {
    console.log('page_viewed', event);
  })

  analytics.subscribe('product_viewed', (event) => {
    console.log('product_viewed', event);
  })
});

Any thoughts on what’ i’m missing?

2

For anyone following along or come across this thread from your own issues, it turned out what I was experiencing stemmed from using the Shopify GraphiQL App. Manually calling the mutation was successful and my Pixel code worked as expected after that.

Not sure why Shopify’s app wouldn’t work - it still says I’m missing oauth scopes. My only guess is that it isn’t/wasn’t setting my access token or some other header or configuration.

But for now, this issue is :white_check_mark:

3

@ChrisGrin I’ve been having this same issue and have been unable to resolve. When you say “manually calling the mutation” how are you going about making that call? Are you using Postman or some other way to send the graphql payload? Thanks in advance.

4

I extended my app to with a UI element in the admin to trigger the graphql mutation for now. It was picky about the JSON syntax as well and this post was helpful in resolving that. Hope this helps.

5

@BradDev Could you elaborate on “extended my app with a UI element to trigger the graphql mutation”? It’s not clear to me where to call that helper function mentioned in the other post; it requires a session to be passed in and that has properties shop and accessToken and it’s not clear where those are meant to come from either

6

I’ve figured this out now. The dots connected once I remembered that our apps run an express server and I dug up the QR code example app and figured it out from there: https://github.com/Shopify/shopify-app-examples/blob/b0572c79bdcd9c00d3d5ba010ff727a18f3d06c4/qr-code/node/web/middleware/qr-code-api.js#L90