Stape App and Customer Events

1

Hey There,

Quick Question, do we need to run the checkout script on all pages?

window.analytics = analytics;
window.initContext = init;
fetch('https://sp.stape.io/widget/script_pixel?shop_id=XXXXXXX')
  .then(response => {
      if (!response.ok) {
          throw new Error('Network response was not ok');
      }
      return response.text();
  })
  .then(scriptText => {
      const scriptElement = document.createElement('script');
      scriptElement.textContent = scriptText;
      document.head.appendChild(scriptElement);
  })
  .catch(error => {
      console.error('There was a problem fetching the script:', error);
  });

Or can we limit this to checkout pages only?

2

Chris, you just need to add this to an custom pixels section, you DON’T need to subscribe to any particular events, that part is withing the downloaded script (https://sp.stape.io/widget/script_pixel?shop_id=XXXXXXX).

So just save entire script into customer events and you’ll be good

3

Hey @Dan

Thanks for your reply.

What I was wondering is if I don’t subscribe to events, wouldn’t this run at the same time the stape shopify app is running?

I would have though this would have been limited to say href.includes(“/checkouts”) for a load so that it doesnt load at the same time as the stape app?

4

Sandbox script will run each time that sandboxed iFrame is loaded (pixel api) so it will run on all pages essentially. however it will do close to nothing on non-checkout pages, because those are tracked via app pixel.

I see what you’re saying, it is kind of redundant that it even gets downloaded on non-checkout pages. I’ll raise this with the devs

1 Like
6

@Dan Thanks, yeah that’s what I was thinking.

maybe wrap it in something like this:

analytics.subscribe("page_viewed", async (event) => {
  const href = event.context.document.location.href;
  if (href.includes("/checkouts") {
window.analytics = analytics;
window.initContext = init;
fetch('https://sp.stape.io/widget/script_pixel?shop_id=XXXXXXX')
  .then(response => {
      if (!response.ok) {
          throw new Error('Network response was not ok');
      }
      return response.text();
  })
  .then(scriptText => {
      const scriptElement = document.createElement('script');
      scriptElement.textContent = scriptText;
      document.head.appendChild(scriptElement);
  })
  .catch(error => {
      console.error('There was a problem fetching the script:', error);
  });
}
)}

note, will probably need to check if it preloaded in the if, ie:
href.includes("/checkouts") && !window.GTM_LOADED

7

hey @Chris_Bradley will very likely address this from our side and app will start generating a new snippet. Give it some time (shouldn’t be too long).

That being said, what you’re proposing looks alright at first glance

8

@Dan

awesome, ill wait for the update to roll through! something around that jist will work I recon.

thanks for your help (and candor) as always!

Cheers,

Chris