Snippet injection

Often you want to inject JavaScript snippets into all pages of your site, either in the <head> or at the end of the <body> tag.

Most analytics providers, retargeting services, and A/B testing services will give you an HTML snippet and ask you to add it to every page on your site. Netlify lets you do this without having to pollute the source code for the site with production specific analytics snippets.

You can pick between injecting the scripts before the closing </head> tag or before the closing </body> tag.

Note

Injected snippets will also show up on the password protection screen. This means you can verify that your analytics scripts are correctly configured without having to remove the password when your site is still under development.

# Limitations

Snippet injection occurs when pages are served, not when they’re built. This means there are some things to consider when using snippets.

  • If you are proxying content to your site, snippets won’t be injected. Instead, the site or service should provide a complete response, including any necessary data.
  • If a route is handled by a function, snippets won’t be injected. Because server side rendering (SSR) on Netlify uses Netlify Functions, snippets won’t be injected on SSR pages. The serverless functions that handle those pages should return a complete response, including any HTML that you might otherwise use our snippet injection feature for.

# Snippet injection UI

In Site settings > Build & Deploy > Post processing, find the Snippet Injection section and select Add Snippet. Then give your snippet a name and paste the snippet body (including any <script> tags if you’re adding a script, etc).

# API endpoints

You can use the API to get snippets, add snippets, and more.

# Environment variables

Injected snippets can access some environment variables in each deploy context. Along with environment variables that you create, you can also access these Netlify read-only variables:

  • CONTEXT
  • BRANCH
  • URL
  • DEPLOY_URL
  • DEPLOY_PRIME_URL
  • SITE_NAME
  • SITE_ID
  • NETLIFY_IMAGES_CDN_DOMAIN

You can access environment variables in your snippets using Liquid template syntax. For example, to add a note to your Deploy Preview to remind visitors that they’re accessing a preview version of your site along with the branch name, you can create an HTML snippet to inject before the closing </body> tag that contains the following:

{% if CONTEXT == 'deploy-preview' %}
  <h1>Hello! This is a preview version of our site.</h1>
  <p>The branch is {{ BRANCH }}</p>
{% endif %}

Netlify will inject this snippet into your site’s pages as they are served. If the value of the CONTEXT environment variable for the deploy is deploy-preview, the message will display at the bottom of each page with the name of the branch associated with the Deploy Preview.

The syntax for accessing environment variables with Liquid depends on whether you’re using the variable for logic or output. Within a {% %} Liquid tag for logic and control flow, use only the variable’s name VARIABLE_NAME. For site output, wrap the variable name in double curly braces {{VARIABLE_NAME}}.

Another example of how you might use environment variables in snippets is to add analytics scripts for split testing.

# More resources