Why can't I set up the Web Pixel App Extension?

Why can't I set up the Web Pixel App Extension?

keenborder
Shopify Partner
1 0 1

Hello everyone, I hope everyone is doing well. I am trying to build a simple Shopify app that uses the Web Pixel extension. In order to integrate the extension, I have followed the official tutorial on the Shopify website: https://shopify.dev/docs/apps/marketing/pixels/getting-started. However, I am encountering an issue in step 5. When I try to run the GraphQL code in step 5, I receive the following error:

2023-09-22 09:47:19 │ backend │ GraphqlQueryError: No extension found.
2023-09-22 09:47:19 │ backend │ at NewGraphqlClient.<anonymous> (/home/mohtashimkhan/marketing-platform-eko/rudderstack/code/shopify-rudderstack-app/shopify-web-pixel/node_mo
dules/@shopify/shopify-api/lib/clients/graphql/graphql_client.js:52:23)
2023-09-22 09:47:19 │ backend │ at Generator.next (<anonymous>)
2023-09-22 09:47:19 │ backend │ at fulfilled
(/home/mohtashimkhan/marketing-platform-eko/rudderstack/code/shopify-rudderstack-app/shopify-web-pixel/node_modules/tslib/tslib.js:164:62)
2023-09-22 09:47:19 │ backend │ at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
2023-09-22 09:47:19 │ backend │ response: {
2023-09-22 09:47:19 │ backend │ data: { webPixelCreate: null },
2023-09-22 09:47:19 │ backend │ errors: [
2023-09-22 09:47:19 │ backend │ {
2023-09-22 09:47:19 │ backend │ message: 'No extension found.',
2023-09-22 09:47:19 │ backend │ locations: [ { line: 3, column: 9 } ],
2023-09-22 09:47:19 │ backend │ path: [ 'webPixelCreate' ]
2023-09-22 09:47:19 │ backend │ }
2023-09-22 09:47:19 │ backend │ ],
2023-09-22 09:47:19 │ backend │ extensions: {
2023-09-22 09:47:19 │ backend │ cost: {
2023-09-22 09:47:19 │ backend │ requestedQueryCost: 10,
2023-09-22 09:47:19 │ backend │ actualQueryCost: 10,
2023-09-22 09:47:19 │ backend │ throttleStatus: {
2023-09-22 09:47:19 │ backend │ maximumAvailable: 1000,
2023-09-22 09:47:19 │ backend │ currentlyAvailable: 980,
2023-09-22 09:47:19 │ backend │ restoreRate: 50
2023-09-22 09:47:19 │ backend │ }
2023-09-22 09:47:19 │ backend │ }
2023-09-22 09:47:19 │ backend │ }
2023-09-22 09:47:19 │ backend │ },



Other people have also been experiencing the same error:
https://community.shopify.com/c/extensions/how-to-create-the-web-pixel-using-the-admin-api-grapql/m-...
https://github.com/pulkitgangwar/shopify-web-pixel-api-example/issues/1
The response says, "No extension found," but the extension has already been created using the "generate extension" command and gets installed when running the app using "dev." I feel like this might be a bug with the Shopify GraphQL API itself.

For more context I am using express to create the endpoint for the Post request:

app.post("/api/protected/webpixel", async (_req, res) => {
  const client = new shopify.api.clients.Graphql({
    session: res.locals.shopify.session,
  });
  const response = await client.query({
    data: {
      query: `
      mutation webPixelCreate($webPixelInput: WebPixelInput!) {
        webPixelCreate(webPixel: $webPixelInput) {
          webPixel {
            settings
            id
          }
          userErrors {
            code
            field
            message
          }
        }
      }
      `,
      variables: {
        webPixelInput: {
          settings: {
            accountID: crypto.randomUUID(),
          },
        },
      },
    },
  });

  if (response.body.data.webPixelCreate.userErrors.length) {
    console.log(JSON.stringify(response, null, 4));
    const errors = queryResponse.body.data.webPixelCreate.userErrors;
    throw new Error(errors.map((error) => error.message).join(" , "));
  }

  return response.body.data.webPixelCreate.webPixel;
});



The request is sent by a simple button created in "react". I even tried using an external client with my store's access token generated from a private app with admin access, but the same error is returned. Please help me in this regard.

Replies 10 (10)

1080
Shopify Partner
297 9 56

@keenborder  

here is given the solution..

 

 

 

 settings: {
            accountID: crypto.randomUUID(),
          },

to change 

 

settings: { accountID: 'correct_settings_value_as_per_toml' },

 

maanpatel
Shopify Partner
3 0 1

@keenborder @1080 , I am facing same issue. Can you please send your sample toml file and qhraphql mutation call which worked for you?

 

Need help urgently.

 

Thanks, Maan

1080
Shopify Partner
297 9 56

@maanpatel  My code as per the doc and generated from the CLI it was working fine.

mutation webPixelCreate($webPixel: WebPixelInput!) {
webPixelCreate(webPixel: $webPixel) {
userErrors {
field
message
}
webPixel {
# WebPixel fields
}
}
}

You can Double check it . if you have any specific Error  

maanpatel
Shopify Partner
3 0 1

Thanks, this worked for me. I am facing another issue in creating developer app using shopify pixel extension API.

I am tryting to setup Facebook Pixel with the help of shopify app and it is giving me below error.

 

Code Screenshot : https://prnt.sc/zcXKgomKzMp3

Error Screenshot : https://prnt.sc/0tqxMb_t105C

 

I want to know that is it allowed to setup 3rd party pixel script in the app built using web pixel extension api?

If yes then what alternatives  I can use to resolve this issue?

 

Regards,

Maan

1080
Shopify Partner
297 9 56

You can't run any third part js code webpixel is secure sandbox you can reference doc for limitation  the . alternative I don't know. 

maanpatel
Shopify Partner
3 0 1

ok, I was going though this article and there they have mentioned that webpixel & server pixel data in "Transmitting app pixels data" section. From this I though there might be some configurations that we can do to setup web pixel.

 

https://help.shopify.com/en/manual/promoting-marketing/pixels/app-pixels#transmitting-app-pixels-dat...

1080
Shopify Partner
297 9 56

@maanpatel  yes this article will good to resolve this issue. if you share the any error may be I can help to resolved the error

1080
Shopify Partner
297 9 56

@maanpatel  have you resolve this error ?

badrooxe
Shopify Partner
6 0 1

in the docs it's mentioned that : 
# This mutation creates a web pixel, and sets the `accountID` declared in `shopify.extension.toml` to the value `123`

i quite didn't understand this , in the `shopify.extension.toml` there's no value such as accountID :


type = "web_pixel_extension"
name = "app_name"

runtime_context = "strict"

[settings]
type = "object"

[settings.fields.accountID]
name = "Account ID"
description = "Account ID"
type = "single_line_text_field"
validations =  [
  { name = "min", value = "1" }
]
1080
Shopify Partner
297 9 56

@badrooxe  it was working fine with the test web pixel.  try below the solution it's works

 

type = "web_pixel_extension"
name = "app_name"

runtime_context = "strict"

[settings]
type = "object"

[settings.fields.accountID]
name = "AccountID"
description = "Account ID"
type = "single_line_text_field"
validations =  [
  { name = "min", value = "1" }
]

 



change to the name = "Account ID" to the  AccountID