If there is a way to bypass the sandbox as this provides limitations for our custom pixel

Web Pixels
1

Hi all, Shopify support said to write here so that developers can help with our question. We need to receive data form our custom pixel but during the test there is a message: “For enhanced security and stability, pixel access is sandboxed”. How can we avoid that?

Here is our code:

/ GTM for Shopify Custom Pixel by Loves Data
// Replace GTM-EXAMPLE with your GTM container ID

window.dataLayer = window.dataLayer || ;
function gtag(){dataLayer.push(arguments);}

(function(w,d,s,l,i){w[l]=w[l]||;w[l].push({‘gtm.start’:
new Date().getTime(),event:‘gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=‘dataLayer’?‘&l=’+l:‘’;j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,‘script’,‘dataLayer’, ‘GTM-WQBPDL6’);

analytics.subscribe(“checkout_completed”, (event) => {
dataLayer.push({ ecommerce: null });
const items = event.data?.checkout?.lineItems?.map((item) => {
return {
item_id: item.variant.product.id,
item_name: item.variant.product.title,
price: item.variant.price.amount,
quantity: item.quantity
}
});
dataLayer.push({
event: “purchase”,
url: event.context.document.location.href,
ecommerce: {
currency: event.data?.checkout?.currencyCode,
value: event.data?.checkout?.subtotalPrice?.amount,
transaction_id: event.data?.checkout?.order?.id,
coupon: event.data?.checkout?.discountAllocations,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
tax: event.data?.checkout?.totalTax?.amount,
items: items
}
});
});

analytics.subscribe(“payment_info_submitted”, (event) => {
dataLayer.push({ ecommerce: null });
const items = event.data?.checkout?.lineItems?.map((item) => {
return {
item_id: item.variant.product.id,
item_name: item.variant.product.title,
price: item.variant.price.amount,
quantity: item.quantity
}
});
dataLayer.push({
event: “add_payment_info”,
url: event.context.document.location.href,
ecommerce: {
currency: event.data?.checkout?.currencyCode,
value: event.data?.checkout?.subtotalPrice?.amount,
items: items
}
});
});

analytics.subscribe(“checkout_shipping_info_submitted”, (event) => {
dataLayer.push({ ecommerce: null });
const items = event.data?.checkout?.lineItems?.map((item) => {
return {
item_id: item.variant.product.id,
item_name: item.variant.product.title,
price: item.variant.price.amount,
quantity: item.quantity
}
});
dataLayer.push({
event: “add_shipping_info”,
url: event.context.document.location.href,
ecommerce: {
currency: event.data?.checkout?.currencyCode,
value: event.data?.checkout?.subtotalPrice?.amount,
items: items
}
});
});

analytics.subscribe(“checkout_started”, (event) => {
dataLayer.push({ ecommerce: null });
const items = event.data?.checkout?.lineItems?.map((item) => {
return {
item_id: item.variant.product.id,
item_name: item.variant.product.title,
price: item.variant.price.amount,
quantity: item.quantity
}
});
dataLayer.push({
event: “begin_checkout”,
url: event.context.document.location.href,
ecommerce: {
currency: event.data?.checkout?.currencyCode,
value: event.data?.checkout?.subtotalPrice?.amount,
items: items
}
});
});

analytics.subscribe(“cart_viewed”, (event) => {
dataLayer.push({ ecommerce: null });
const items = event.data?.cart?.lines?.map((item) => {
return {
item_id: item.merchandise.product.id,
item_name: item.merchandise.product.title,
price: item.merchandise.price.amount,
quantity: item.quantity
}
});
dataLayer.push({
event: “view_cart”,
url: event.context.document.location.href,
ecommerce: {
currency: event.data?.cart?.cost?.totalAmount?.currencyCode,
value: event.data?.cart?.cost?.totalAmount?.amount,
items: items
}
});
});

analytics.subscribe(“product_added_to_cart”, (event) => {
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: “add_to_cart”,
url: event.context.document.location.href,
ecommerce: {
currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,
value: event.data?.cartLine?.cost?.totalAmount?.amount,
items: [
{
item_id: event.data?.cartLine?.merchandise?.product?.id,
item_name: event.data?.cartLine?.merchandise?.product?.title,
price: event.data?.cartLine?.merchandise?.price?.amount,
quantity: event.data?.cartLine?.quantity
}
]
}
});
});

analytics.subscribe(“product_viewed”, (event) => {
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: “view_item”,
url: event.context.document.location.href,
ecommerce: {
currency: event.data?.productVariant?.price?.currencyCode,
value: event.data?.productVariant?.price?.amount,
items: [
{
item_id: event.data?.productVariant?.product?.id,
item_name: event.data?.productVariant?.product?.title,
price: event.data?.productVariant?.price?.amount,
quantity: 1
}
]
}
});
});

analytics.subscribe(“page_viewed”, (event) => {
window.dataLayer.push({
event: “shopify_page_view”,
url: event.context.document.location.href
});
});

2

For now there is no option to bypass the sandbox environment.

2 Likes
3

Hello Anna,

The banner you’re seeing is not supposed to appear as a warning as it’s not a problem, but rather a fact about pixels, and this banner is meant to provide merchants with information about it.

This banner is going to be changed to a information banner (light blue) probably today.

This sandboxing of pixels can’t be bypassed, at least on checkout, as it is meant to ensure that any pixels can’t collect or retrieve data outside its stated intent, which otherwise could be a security risk.

Previously, any code snippets could be used to bypass customer consent requirements, which violates the Shopify Terms of Service and can lead to legal liability for you.

Hope this help a little bit :pray:

2 Likes