jonolayton Posted August 23, 2016 Share Posted August 23, 2016 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 Link to comment
brandon Posted August 23, 2016 Share Posted August 23, 2016 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)? If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
jonolayton Posted August 23, 2016 Author Share Posted August 23, 2016 @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... Link to comment
brandon Posted August 23, 2016 Share Posted August 23, 2016 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 If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
brandon Posted August 23, 2016 Share Posted August 23, 2016 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. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
brandon Posted August 23, 2016 Share Posted August 23, 2016 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. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.