Shopify / ui-extensions

MIT License
260 stars 36 forks source link

How to Activate Shopify Web Pixel Extension on Production Store? #2196

Open KaizenTamashi opened 1 month ago

KaizenTamashi commented 1 month ago

Issue:

Hi, I'm trying to activate a Shopify web pixel extension on a production store. The web pixel extension is configured in the Shopify Remix app template. The backend is wired to Express.js.

What I've tried:

Approach_1: I was able to activate it on the dev/test store using the Shopify app dev GraphQL by following this guide https://shopify.dev/docs/apps/build/marketing-analytics/build-web-pixels#:~:text=To%20activate%20a%20web%20pixel,extension. However, I couldn't apply it on the production store since i cannot run shopify app dev on production store to open up the shopify GraphQL console.

mutation {
  # This mutation creates a web pixel, and sets the `accountID` declared in `shopify.extension.toml` to the value `123`.
  webPixelCreate(webPixel: { settings: "{\"accountID\":\"123\"}" }) {
    userErrors {
      code
      field
      message
    }
    webPixel {
      settings
      id
    }
  }
}

Approach_2: I've also tried this guide that activates the pixel using shopify remix app's loader function. Unfortunately it didn't work as well. https://community.shopify.com/c/extensions/how-do-you-actually-activate-the-web-pixel/m-p/2496617

shopify remix app template > app app._index.jsx

export const loader = async ({ request }) => { // Authenticate with Shopify const { admin } = await authenticate.admin(request); 
const mutationResponse = await admin.graphql( #graphql
        mutation webPixelCreate($webPixel: WebPixelInput!) {
          webPixelCreate(webPixel: $webPixel) {
            userErrors {
              field
              message
            }
            webPixel {
              settings
              id
            }
          }
        }
      , { variables: { webPixel: { settings: { "accountID": 'Account_ID_45466_this_is_as_per_toml'
}, }, }, } ); 
if (!mutationResponse.ok) { console.error('Request failed', mutationResponse); return; } 
const data = await mutationResponse.json(); console.log(data); 
return mutationResponse; 
}; 

const loaderDataForWebPixel = useLoaderData();
nithinvukkusila commented 3 weeks ago

Is it Working For You ? Which approach did you take ?

AdityaRamanSingh commented 1 week ago

"accountID": 'Account_ID_45466_this_is_as_per_toml' Could you please explain how you got account id as per toml coz I'm unable to find one.