Jump to content

Accelerate

Circle Member
  • Posts

    3
  • Joined

  • Last visited

Everything posted by Accelerate

  1. Here's how I structured my multi language site, the main idea is to have in the main navigation section in Squarespace all the pages you want to have in both English and whatever alternate language, do the translation manually and just ensure the URL slug is correct and add the page header code injection for the alternate hreflang tag. Main language is English under www.website.com Alternate language is under www.website.com/xx/ The main navigation section in Squarespace looks like: (example for English & Italian language) + /page + /it/page + /about-us + /it/about-us I then have in the main navigation a link page acting as language switcher: link title: English/Italiano url: #lang For each page both English and alternate language, you will have to ensure google knows the alternate href lang tag, so add the following code in both languages: <link rel="alternate" hreflang="en" href="https://www.website.com/about-us" /> <link rel="alternate" hreflang="it" href="https://www.website.com/it/about-us" /> and here's the code injection in the site footer: // Default Country Code let defaultCountryCode = 'en'; let alternateCountryCode = 'it'; let countryCode = defaultCountryCode; let countryCodePath = location.pathname.match(/\/[a-z]{2}\//); // Set Country Code from URL if (countryCodePath != null) { countryCode = countryCodePath[0].replaceAll('/', ''); document.documentElement.lang = countryCode; // Hide all but 'countryCode' document.querySelectorAll('.header-nav-item.header-nav-item--collection a[href]:not([href^="/' + countryCode + '"]') .forEach(function (el) { el.closest('.header-nav-item.header-nav-item--collection').style.display = 'none'; }); document.querySelectorAll('.header-menu-nav-item.header-menu-nav-item--collection a[href]:not([href^="/' + countryCode + '"]') .forEach(function (el) { el.closest('.header-menu-nav-item.header-menu-nav-item--collection').style.display = 'none'; }); // Change language switcher URL document.querySelectorAll('[href="#lang"]').forEach(function (el) { el.setAttribute('href', location.pathname.substring(3)); }); // URL Mapping for Logo document.querySelectorAll('a[href="/"]') .forEach(function (el) { el.setAttribute('href', '/' + countryCode + '/home'); }); } else { // Hide all but English document.querySelectorAll('.header-nav-item.header-nav-item--collection a[href^="/' + alternateCountryCode + '"]') .forEach(function (el) { el.closest('.header-nav-item.header-nav-item--collection').style.display = 'none'; }); document.querySelectorAll('.header-menu-nav-item.header-menu-nav-item--collection a[href^="/' + alternateCountryCode + '"]') .forEach(function (el) { el.closest('.header-menu-nav-item.header-menu-nav-item--collection').style.display = 'none'; }); // Change language switcher URL document.querySelectorAll('[href="#lang"]').forEach(function (el) { el.setAttribute('href', (location.pathname === '/') ? alternateCountryCode + '/home' : '/' + alternateCountryCode + location.pathname); }); } When users will click the "English/Italiano" link (on desktop and mobile) it will automatically switch from the English page to the same Italian page /home -> /it/home The only problem with this and any other similar solution is the Hreflang and HTML lang mismatch unfortunately the HTML language will stay to whatever language you set the squarespace website, even if I change it in the code... that's done at the JS level not at the server level, so robots will always see the default language ex. English Hope it helps.
  2. Seems adding <script> tags in the "post submit HTML" of the form block is not working anymore in 7.1 🤨 ...which is quite annoying! Based on the idea of @foleyatwork I rewrote it to have it working on 7.1 Paste this code in the footer code injection of the whole website: <script> document.addEventListener('DOMContentLoaded', function() { console.log('Squarespace ready'); document.querySelectorAll('.form-block').forEach((formBlock) => { const jsonStr = formBlock.querySelector('script[id*=form-context]').textContent; const formName = JSON.parse(jsonStr).formName; formBlock.onsubmit = function() { // Facebook Lead event example fbq("track", "Lead", {content_category: 'form', content_name: formName}); // Google Lead event example gtag('event', 'generate_lead', {event_category:'form', event_label: formName}); }; }); }, false); </script> Hope it helps.
  3. Yeah unfortunately at the moment the Squarespace form, wipe out any value you inject in the hidden field as soon as you type something in the form itself. Not sure if a bug or a "by design" decision to force using the hidden field only with value coming from the query string in the URL (as for their official doc https://support.squarespace.com/hc/en-us/articles/206543997-Tracking-form-block-referral-sources ) Anyway if and ever this will work again, here's an example of code that doesn't use jQuery and extract basic info from the geolocation API: <script> document.addEventListener('DOMContentLoaded', function() { fetch('https://ipapi.co/json/') .then(function (response) { response.json().then(jsonData => { if (document.getElementsByName("SQF_YourHiddenFieldName").length != 0) { //set ip address for form submission document.getElementsByName("SQF_YourHiddenFieldName")[0].value = jsonData.ip + " | " + jsonData.city + " | " + jsonData.country_name + " | " + jsonData.org; } }); }) }, false); </script> You can put that in the Footer or maybe just in the "contact us" page. If you are on Squarespace 7 and not 7.1 you might need to wrap your code in window.Squarespace.onInitialize(Y, function () {...}); instead of document.addEventListener('DOMContentLoaded', function() {...}, false); Hope it helps.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.