Custom Pixels events sandbox session and cookies

Shopify Plus
1

I am a developer helping a client with a Shopify Plus account. We have several 3rd party vendors asking for various tracking pixels and, specifically, the conversion of a successful checkout.

Searching for documentation, I found this - https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code

I tested this by subscribing to each event and passing a console log to the client.

const testing = {
  started: () => console.log('checkout_started is called'),
  completed: () => console.log('checkout_completed is called')
}

analytics.subscribe("page_viewed", event => {
  console.log('page_viewed is called')
  // visible
});

analytics.subscribe("checkout_started", event => {
  testing.started(); // visible
  //console.log('checkout_started is called') // not visible
});

analytics.subscribe("checkout_shipping_info_submitted", event => {
  console.log('checkout_shipping_info_submitted is called')
  // visible
});

analytics.subscribe("checkout_completed", event => {
  testing.completed(); // visible
  //console.log('checkout_completed is called') // not visible
});

analytics.subscribe("checkout_contact_info_submitted", event => {
  console.log('checkout_contact_info_submitted is called')
  // visible
});

analytics.subscribe("collection_viewed", event => {
  console.log('collection_viewed is called')
  // visible
});

analytics.subscribe("payment_info_submitted", event => {
  console.log('payment_info_submitted is called')
  // visible
});

analytics.subscribe("product_added_to_cart", event => {
  console.log('product_added_to_cart is called')
  // visible
});

analytics.subscribe("product_viewed", event => {
  console.log('product_viewed is called')
  // visible
});

analytics.subscribe("search_submitted", event => {
  console.log('search_submitted is called')
  // not visible - might be theme config, not an issue
});

analytics.subscribe("checkout_address_info_submitted", event => {
  console.log('checkout_address_info_submitted is called')
  // visible
});

I added a comment for each event tested and found that checkout_started & checkout_complete do not pass console.log to the client directly but can thru a method call (as documented).

The problem is that the sandbox window and the client window are not the same. In the example shown here I can confirm that the dataLayer in the sandbox has the new entry, but the client dataLayer does not.

(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_ID_PLACEHOLDER);

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed'
  });
});

Is it safe to assume that session cookies used by GA4 are available in the sandbox? Or would this look like a different session if the pageview was not using the “page_viewed” event?

2

Through my testing, I confirmed that the iframe sandbox has access to the parent frame cookies. So the session should persist for the example of using GTM to fire GA pixels.

But, because dataLayer is in a new window scope of the iframe, the dataLayer on the parent frame and iframe are separated and sandboxed. This will impact triggers or variables in GTM. You need to ensure you don’t have cross-window expectations.

So that is fine and makes sense for sandboxing and security.

But… I am curious why the checkout_started & checkout_completed seem to be fired outside the iframe window scope. And requires a callback or method scoped to the iframe to work. Not an issue, but just my developer brain wanting to understand what is happening here so I can better use these tools.