Where To Place Third-Party Scripts

Follow

 

Overview


You've got a sweet script from a third-party, and they told you to put it in a specific location. This article will show you where to stick it. 

 

Determine Where Script Should be Placed


Check with the third-party to find out where the script should be located in the site's HTML. Here are some common locations:

  • [1] Head (or Head Tags) 
  • [2] Bottom of HTML body just before </body>
  • [3] Order Confirmation Page

Once you've determined the location, proceed to the corresponding Step 2. 

 

Step 2 (Option 1): Place Script in <head>


The HTML Head is the first part of a page to load. Analytics scripts typically go here. There's two places in the admin that will place a script in the HTML head

  1. Settings > Marketing > Analytics Script
  2. Themes > Edit Theme > Head Tags

The difference is that a script in Analytics Script will be added to the head of every page, regardless of theme. Whereas, Edit Theme > Head Tags adds the script to every page on whatever theme you edited. 

Here's what a script in Settings > Marketing > Analytics Script location looks like: 

2017-04-06_15-15-12.png

 

Here's Themes > Edit Theme > Head Tags: 

 

2017-04-06_15-23-27.png

 

And here's what both look like in the page's source: 

 

2017-04-06_15-29-17.png

 

Step 2 (Option 2): Place Script Before </Body>


Scripts that modify the look of a page, or insert something onto the page (for example a contact form or chat box) typically go at the bottom of the HTML, just before the ending </body> tag. There's two ways to place a script just before </body>

1.) By pasting the script into each template in Themes > Edit Theme > Templates

 

2017-04-06_15-53-00.png

 

2.) By using ##INCLUDESCRIPTBOTTOM[/path/to/file.js]## merge code in Head Tags: 

 

2017-04-06_16-09-49.png

##INCLUDESCRIPTBOTTOM[]## can also be used with externally hosted scripts. Notice in the example above, we use the ##THEMEDIR## merge code to fill in the theme's directory in Content > Files. 

Here's what both look on a page's source code: 

 

2017-04-06_16-20-48.png

 

 

Step 2 (Option 3): Place Script on Order Confirmation Page


The Order Confirmation page is the page shown to the customer directly after placing an order. Order tracking and conversion scripts typically go here because they depend upon order information like order total.

 

To place a script here, navigate to Settings > Orders General and paste the script in the Place Order Script box: 

 

2017-04-06_16-38-19.png

 

Scripts that are placed on the Order Confirmation page are usually used in conjunction with Order Based Merge codes such as ##ORDERTOTAL## (which populates an order's grand total). For a full list of order based merge codes, see the Order Based Merge Codes section of What Merge Codes are Available.

 

Have more questions? Submit a request

Comments