Load script on page before onLoad using scriptTag

[reza_figpii]

Our tracking code should be loaded with page initiation or at the latest DOMContentLoaded.

Our users use our app to run AB tests on their store and make modifications to their pages. 

When our app load is delayed, there's a noticeable and unpleasant flicker effect (the page fully loads, then the test makes the changes, so end-users see the original page and then the modifications).

Our script is not directly added as a <script> tag to the page. Rather it's inserted by a function called asyncLoad() after 'onload' or 'load' (depends on browser).

At this point most of our users have opted out of using our Shopify app and manually add our script to the theme.liquid's head section, but the app really simplifies the process. 

Currently we're using scriptTag to insert our tracking code but based on API docs the only valid value for event is onload. 

Any ideas on how we can either insert our <script> directly to the theme or somehow use DOMContentLoaded as the event for scriptTag?

[EcomGraduates]

Hello there!  

There are a few ways to insert a script directly into a Shopify theme or use the DOMContentLoaded event for the scriptTag:

1. Using the Shopify theme editor: You can use the Shopify theme editor to add a script directly to the theme. You can access the theme editor by navigating to the "Online store" section of your Shopify admin panel and then clicking on "Themes". Once you have selected your theme, you can click on the "Actions" button and select "Edit code". From here, you can add your script to the appropriate file, such as the theme.liquid file for a global script or a specific page file for page-specific scripts.
2. Using the Shopify ScriptTag API: You can use the Shopify ScriptTag API to add a script to your store. The ScriptTag API allows you to create, read, update, and delete script tags. You can use the ScriptTag API to add your script to the store and set the event to DOMContentLoaded. Once the DOMContentLoaded event is fired, your script will be executed.
3. Using a Shopify app: You can use a Shopify app to insert your script directly into the theme. There are many apps available that allow you to add custom code to your store, such as "Code Injector" or "Custom Code". These apps allow you to add your script directly to the theme and set the event to DOMContentLoaded.
4. Using a Custom Theme Section: You can create a custom theme section, in this section you can add an html script tag, then you can add the section to any page you want. This way you can have the script where you need it and avoid adding it to all pages.
5. Using a Shopify theme section feature: Some premium themes come with built-in sections that allow you to add custom code. You can use this feature to insert your script directly into the theme and set the event to DOMContentLoaded.

hope this helps! 

[reza_figpii]

Thanks for the response, 

using option 1 and 5 are not an option for us as we're trying to do this through our Shopify app FigPii, 

Regarding using ScriptTag API based on the documentation provided here ScriptTag the only value allowed for 'event' is onload which is too late. How can we set this to DOMContentLoaded?

The load / onload event is too late as it waits for all content to be download (images, subframes, etc). 

Thanks for your help!

[rheannonedev]

I'm currently working on this same problem. I'll update when I figure something out! 

[RAd_Tag_Team]

Curios, if there has been any update here? We have also seen "complaints" from merchants that our script takes long to load because it waits until the full page is loaded and the onload event gets triggered.

It will be great if there is support for the DOMContentLoaded event (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event), especially for tracking-type scripts which don't leave any visual footprint on the site.

[rheannonedev]

The only workaround we identified was to have merchants manually add the <script> to their head tag, and we updated our app to delete the existing script tag. This circumvents the `asyncLoaded` function. 

[RAd_Tag_Team]

Hi @rheannonedev ,

That makes sense, thanks for the quick feedback.

It doesn't make really sense for us as it would require manual code/template changes for the merchant which is the reason we built the app. 😕 We added it to our list of known Shopify issues. Luckily it doesn't affect too many of merchants (as far as I know) but we have seen it a couple of times where the tags are loaded 30s or even later.

It seems the push is towards web/server pixels and checkout extensions anyway.

[rheannonedev]

I learned that the script tags run in chronological order, so if the merchant has a lot of apps installed before yours, it will take longer. 

[RAd_Tag_Team]

Thanks, that's a good insight, but probably tough to tell advertisers to uninstall all apps and then re-install apps and ours first. 😉