Adding custom code to the head of a single page

Hi all,

I've been working with SS for quite a few years, and have never been able to work out how custom code can be added to the head tag of a single page.

In some instances, we are required to add code snippets specifically to the head of a single page as opposed to across the entire site. One such example is Google Analytics Content Experiments.

After adding the code via the page settings > advanced > page header code injection, I have noticed that the code actually ends up somewhere well into the body.

Is there a way to get custom code inside the head on a single page of a Squarespace site?

Thanks in advance

Jonathan

You are correct that page header injection puts the code in the

body

element, not the

head

element. I guess that's why Squarespace calls it "header" and not "head". It may not be your actual "header" but it does get injected as the first element within the

body

.

Having said that, you can insert code into the

head

tag using settings > advanced > page header code injection and then write the Javascript such that it will only apply to a specific page.

Are you able to provide details regarding the specific code you want to insert and on which page (along with a link to the site/page)?

@BrandonW - thanks for a speedy and helpful reply.

I don't think I should paste the code onto a public forum, but I can see how this could be done with javascript to insert into the head just on the homepage - which is what I'm trying to do. In fact, I've recently been doing something similar elsewhere.

Are you thinking something similar to:

var pageSlug = window.location.pathname;
if (pageSlug === "") {
$('head').prepend('myCustomCode');
}

This would work (I think), but the only trouble is that I might not be able to declare myCustomCode as a variable because the code is full of single and double parentheses...

Something like this should work. Using your browser's developer tools (F12), locate an element ID or class that is unique to the page you want to target. For example, on the Montauk Demo page, the ID of the body on the home page is

collection-56d73ffc859fd045d0337663

. So, to target just that page, you could do something like this, inserted via page head code injection:

<script>
   window.onload = function() {
       var homeBody = document.getElementById('collection-56d73ffc859fd045d0337663');
       if (homeBody) {
           //Do stuff here. This will only run on a specific page.
           var head = document.getElementsByTagName('head')[0];
           alert('Custom javascript will run here.');
       }
   };
</script>

Just to be thorough, the above code could also be added to the footer injection as such:

<script>
   (function() {
       var homeBody = document.getElementById('collection-56d73ffc859fd045d0337663');
       if (homeBody) {
           //Do stuff here. This will only run on the specific page.
           var head = document.getElementsByTagName('head')[0];
           alert('Custom javascript will run here.');
       }
   })();
</script>

And to Octopus' point, you could simply insert the script into a specific page's header injection, and figure the difference between being in the

head

and first in the

body

is inconsequential. That's probably a safe assumption, accepting the fact that placing

script

elements at the top of the

body

element is a bit unconventional. (Ref. 1, Ref 2).

Do let me know if this works for you.

-Brandon

Agreed. The developer should weigh this disadvantage against the potential advantage of keeping such code in a single location (site header/footer injection) as opposed to located across multiple pages' header injection points.

Good point. I updated my answer accordingly.

A small clarification: I believe Javascript will be loaded and executed as it is encountered unless

defer

and/or

async

are used (which prompted me to add

window.onload...

for head injection...TY). However, I may just be misunderstanding the first part of your second sentence.