# How to inject content into \`before-script-load\`?

**URL:** https://meta.discourse.org/t/how-to-inject-content-into-before-script-load/265989
**Category:** Development
**Created:** [May 23, 2023, 9:35pm UTC](https://meta.discourse.org/t/how-to-inject-content-into-before-script-load/265989 "2023-05-23T21:35:51Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![gormus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gormus/32/428592_2.png) [@gormus](https://meta.discourse.org/u/gormus)
#### Post date: [May 23, 2023, 9:35pm UTC](https://meta.discourse.org/t/how-to-inject-content-into-before-script-load/265989/1 "2023-05-23T21:35:51Z")

</div>

I’d like to inject some javascript into the `before-script-load` region.

Is it possible to achieve this via a theme, or theme-component?

> <https://github.com/discourse/discourse/blob/911539c1b23907f1bb46b6ef9264a5fb42621342/app/assets/javascripts/discourse/app/index.html#L16>

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 23, 2023, 11:46pm UTC](https://meta.discourse.org/t/how-to-inject-content-into-before-script-load/265989/2 "2023-05-23T23:46:23Z")

</div>

does it need to run in that exact place (order of execution)? the browser will load all those head tag scripts regardless of their order. you can add the script in the head tag area by going to the edit CSS/HTML section of a theme in `admin-customize-themes`. if your theme is hosted and doesn’t allow customization, you can add it with a theme component (or to the head tag file of the repository if it’s your theme).

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [May 24, 2023, 12:33am UTC](https://meta.discourse.org/t/how-to-inject-content-into-before-script-load/265989/3 "2023-05-24T00:33:08Z")

</div>

> [@gormus](#):
>
> I’d like to inject some javascript into the `before-script-load` region.

That is a development page that isn’t used in production.

As for the actual pages in Discourse, themes can inject content in the head element just fine, but without much control of the exact place where it happens, but as @Lilly said this shouldnt be an issue.

If you can tell us mor details about what exactly what you want to accomplish we may offer some suggestions.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [May 24, 2023, 12:34am UTC](https://meta.discourse.org/t/how-to-inject-content-into-before-script-load/265989/4 "2023-05-24T00:34:30Z")

</div>

I think you want to put it in an initializer.

Have a look at [Split up theme Javascript into multiple files](https://meta.discourse.org/t/split-up-theme-javascript-into-multiple-files/119369)

But Falco knows lots more about that than I do.

---

<div class="post-metadata">

### Author: ![gormus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gormus/32/428592_2.png) [@gormus](https://meta.discourse.org/u/gormus)
#### Post date: [May 24, 2023, 4:23pm UTC](https://meta.discourse.org/t/how-to-inject-content-into-before-script-load/265989/5 "2023-05-24T16:23:32Z")

</div>

Thank you @Lilly, @Falco and @pfaffman.

> [@Falco](#):
>
> As for the actual pages in Discourse, themes can inject content in the head element just fine, but without much control of the exact place where it happens

I believe this is my main problem.

As an example, I need to make sure the `dataLayer` object I set is always added to page before any other script, if possible. Especially before GTM loads (either via builtin, or a custom loader).

On my local development box, I tried utilizing the _initializes_, _pre-initializers_, and the `head_tag.html` template;  
And inside `head_tag.html` template, I tried wrapping my code with `<script></script>` and the `<script type="text/discourse-plugin" version="0.1"></script>` tags.

With each one I can see the bootstrapping order relative to each other. But other than this, I don’t seem to have control over the order of the scripts loaded.
