Pixels & GTM
      Back to home
      1. Help Center
      2. Sell
      3. Pixels & GTM

      Pixel Placement on Squarespace

      How to Place a Pixel on Squarespace

      Before you begin

      • If you add code to Code Injection, we may ask you to disable it while editing your site.

      • To add JavaScript to a Code Injection field, surround the code with <script></script> tags.

      • We recommend adding CSS to the Custom CSS Editor instead of Code Injection. If you're adding it to Code Injection, surround the code with <style></style> tags.

      When to use Code Injection

      Use Code Injection to add HTML and scripts that enhance specific parts of your site. These might include live chat services, domain verification for custom email services, or site analytics.

      Code Injection isn't intended for adding content or styles. To add content to your site, visit Building a page. To add custom CSS for styles, use the Custom CSS Editor.

      Step 1 - Open Code Injection

      • In the Home Menu, click Settings, click Advanced, and then click Code Injection.

      Step 2 - Add HTML code

      Header: Code added here is injected into the <head> tag on every page in your site.

      Footer: Code added here is injected before the closing </body> tag on every page in your site.

      Note: The footer area is defined by your template.

      Lock page: The lock screen appears when a page or site is hidden behind a site-wide or page password. Code injected here displays above the lock screen's password field.

      Although you can add code to this field, we recommend you use the Lock Screen panel to design your lock page instead. That way, you can add a background image or slideshow, adjust font styles, incorporate your logo, and more.

      Order confirmation page: Code added here is injected into the order confirmation page that appears after a customer checks out. This works well for adding third-party tracking and affiliate programs to your store.

      There are six tags you can use to insert information specific to the customer:

      • {orderId} – The unique ID of the confirmed order
      • {orderSubtotal} – The subtotal of the confirmed order
      • {orderSubtotalCents} – The subtotal of the confirmed order, in cents
      • {orderGrandTotal} – The grand total of the confirmed order
      • {orderGrandTotalCents} – The grand total of the confirmed order, in cents
      • {customerEmailAddress} – The customer's email address, as it was entered in the "Billing Info" section

      Step 3 - Save

      • After adding your code, click Save.

      Per-page Code Injection

      You can also inject code into a specific page:

      1. Hover over the page in the Pages panel.

      2. Click the  icon

      3. Click Advanced

      Page Header Code Injection adds code to the <head> tag of that page. It won't display on Index landing pages.

      In Blog Page settings, Post Blog Item Code Injection adds code to every blog post.

      • Depending on your template, it will appear above or below the post content.

      • In templates with the Grid/stacked Blog Page, the code displays on the blog landing page and not on individual posts.

      Note: Ajax loading may prevent CSS added to Code Injection from loading correctly. Add CSS to the CSS Editor instead.

      Disable Scripts in Preview

      Custom code can sometimes prevent you from securely editing your site. When helping you troubleshoot, we may ask you to disable scripts in preview. This means that you won’t see your custom code while logged in, but it won’t affect how your site appears to visitors.

      You’ll see this message at the bottom of your site if your code is interfering:

      We detected an error loading your site preview. This is usually caused by injected code.

      To edit securely, click Disable Scripts in Preview at the bottom of your site. The message will change to Scripts have been disabled on your site preview. To view your custom code, open a new private or incognito window in your browser and enter your page’s URL.

      If the disable scripts message doesn't appear automatically:

      1. Prompt the message to appear by typing /safe at the end of your secure editing URL, then pressing Enter.

        If this doesn't work, check any areas where you've added custom code to temporarily remove it while troubleshooting.

      After disabling your code, you may see an Enable Scripts in Preview? message. We don't recommend clicking this, as it may interfere with your ability to preview, edit, or run your site when you're logged in. It’s not possible to hide this message, but you’ll only see it when you’re logged in—it’s not visible to visitors.

      Custom code modifications fall outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Custom code can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

      Learn best practices for adding custom code.

      Read our general guide on third-party customizations.

      Visit Squarespace Forum, our customer and developer community.

      Hire a Squarespace Expert to help build custom code for your site.

      Explore our premium and enterprise-level plans to develop a more customized solution for your business.