Loading custom tag on Checkout pages like TikTok app

shftlvch · ‎08-23-2023

Hi, community.

I'm creating an app that loads pixel tracking code and leverages Customer Events to track customer activity. I'm trying to find a way to include my pixel code in the checkout pages.

I've tried:

scriptTagCreate (https://shopify.dev/docs/api/admin-graphql/2023-07/mutations/scriptTagCreate) — works only for non-checkout pages.
App embed blocks (https://shopify.dev/docs/apps/online-store/theme-app-extensions/extensions-framework#example-app-emb...) — works only for non-checkout pages.
Extension with runtime_context = "lax" in the TOML config — loads the script in the <iframe> and doesn't have access to the top frame.
Extension with runtime_context = "strict" (default) in the TOML config — don't have an access to `window` or `document` which is needed to add node to the <head> section.

Meanwhile, TikTok official Shopify app somehow loads its <script>-s to the <head> section even on the checkout pages. Also noticed that `trekkie` lib has it in its config.

Is there a documented way to add pixel script to the <head/> on checkout pages by creating a custom app? Or TikTok has its own "partner" way to integrate with Shopify?

LewisJackson · ‎11-01-2023

Hi @Shftlvch Did you find a way to get a script tag on the checkout page for Shopify Plus merchants? I have found a manual workaround for merchants where they can manually add the script tag JS code directly inside the head tag of the checkout.liquid file and it works. Do you know if there's anyway to replicate this in the backend and automate it in an app?