FAQ: How to instrument Amplitude on 3rd party website builders

FAQ: Say your website is not natively built and is instead built on a 3rd party website builder like Wix,  Squarespace, or Shopify. Can you instrument Amplitude’s Javascript SDK to track events?

Answer: Yes! So long as you have access to the header/underlying source code for the websites you are building on the 3rd-party builder, you should still be able to install Amplitude. Otherwise, you should still be able to use our HTTP API to send data to us server-side using webhooks. Though we are not experts on these 3rd party website builders, we gathered information from current customers and 3rd party builder’s websites to help get you started on setting up Amplitude’s JS SDK!

Note: Amplitude Support will support information written here but don’t have recommendations on anything outside of it. Also, step-by-step instructions are built off of what is currently available in these 3rd party platforms as of May 2020 and may become outdated.

 Table of Contents

• General Tips
• Wix
• Squarespace

General Tips

This article will go over best practices and learned information on how to instrument Amplitude on 3rd party website builders. We then have specific steps available for Wix and Squarespace as they have been the most common platforms thus far. 

Like a website built from scratch/natively, most 3rd party website builders have an underlying code base that you can use. You will then add Amplitude's Javascript SDK in that space as if you were adding the SDK to your natively-built website. Generally, you will need to add the JS SDK snippet to the header and the rest of the JS SDK code in the body.

You can also check to see if your provider has webhooks available. In web development, a webhook sends an HTTP request to a specified url in response to an event. As such, if your provider has webhooks available, you can then use webhooks to combine a trigger or automation with an HTTP target to our server-side endpoint - HTTP v2. 

Wix

Wix has a Tracking Tools & Analytics feature in which you can use to embed Amplitude’s JS SDK snippet and code to your site. 

To get started: 

1. Go to Settings in your site's dashboard.
2. Click the Tracking & Analytics tab under Advanced Settings.
3. Click + New Tool and select “Custom” tool 
4. Set up your custom code:
   1. Enter your custom code.
   2. Select the relevant domain.
      Note: This option will appear only if you have multiple domains.
   3. Enter a name for your custom code. 
   4. Add Code to Pages: Select which pages to add your code to:
      • All Pages: Click the dropdown to select an option:
        • Load code once.
        • Load code on each new page. Click here to learn more about this option.
      • Choose specific pages: Begin typing the name of the relevant pages and then click the checkbox next to the relevant page.
   5. Place Code in: Select where the code snippet in placed in your site's code:
      • Head - this is where the JS SDK install snippet should be on every page you wish to track analytics on
      • Body - this is where all other calls - logEvent, user properties - should be
5. Click Apply. 

Notes: From past customer experience, Wix allows you to add header scripts but they don't let you call functions from it. The customer saw a tip on a forum which suggested putting the necessary script in the Public folder.

References:

https://support.wix.com/en/article/about-tracking-tools-analytics
https://support.wix.com/en/article/embedding-custom-code-to-your-site

Squarespace

Squarespace has Code Injection and Code Block features in which you can use to embed Amplitude’s JS SDK snippet and code to your site. 

Note: At the current moment, it looks like these features are premium features only available in Business and Commerce plans.

Code Injection

Use Code Injection to add Amplitude’s JS SDK install snippet and other scripts that enhance specific parts of your site (i.e. order confirmation page). To add JavaScript to a Code Injection field, surround the code with <script></script> tags. There are site-wide code injection and per-page code injection options. See this page for a per-page code injection option. If you add code to Code Injection, Squarespace may ask you to disable it while editing your site.

Add JS SDK install snippet with Code Injection: 

1. Open Code Injection - In the Home Menu, click Settings, click Advanced, and then click Code Injection.
2. Add JS SDK code into the appropriate Code Injection fields for the header, footer, lock page, or order confirmation page.
   • Header - Code added here is injected into the <head> tag on every page in your site. This is where the Amplitude JS SDK install snippet will be
   • See the other 3 options here: https://support.squarespace.com/hc/en-us/articles/205815908
3. After adding your code, click Save.

Code Block

Use Code Block to set up logEvent, user properties etc calls. To add JavaScript to a Code Block field, surround the code with <script></script> tags.

To add a Code Block:

1. Edit a page or post, click an insert point, and select Code from the menu. For help, visit Adding content with blocks.
2. Add your code in the text field - see our Using the SDKs documentation for the event and properties calls 
3. If you're using the Code Block to display code snippets, check Display Source.
4. Click Apply to save your changes.