Implementation guide for implementing our JavaScript to trigger web intercepts

There are two types of JavaScript snippets in Ethnio:

Global JavaScript that goes in your tag manager and can be added to every page on your site. You then can add URL targeting in Ethnio to decide for an individual study where the intercept should appear. This is the preferred implementation in most cases. Read more here on Global JS
Study-specific JavaScript ID that is tied to one single study and is usually restricted to a very narrow subset of your web site. This is desired if you'd like to send less traffic to Ethnio, or swap IDs between studies.

For either approach, when a visitor loads your page, the code displays the Ethnio intercept (if the study is turned on), which then collects responses, if the user fills it out. Installing the JavaScript code on your page does not mean that the intercept will start appearing. The default state for all Ethnio studies is "off." You need to log into your Ethnio account and turn the study on in order to begin recruiting.

Quick Start

Ethnio is similar to a survey in functionality, but built exclusively for researchers. The basic functionality is that you can create a web-based form with custom questions, place JavaScript on your web site, and then control the display of that form from inside of ethnio. We call these things screeners. You can either use the JavaScript under Study > Publish in your ethnio account, or a direct link if you don’t want to place third party JavaScript on your site.

Tag Managers

If you're using a tag manager, such as Google Tag Manager, check out the article here.

Options

Check out all publish options here.

JavaScript code segments

The most important detail is to place Ethnio code as close as possible to your closing body tag (see image below). Ethnio might still work if you place our code in a different part of your page, like in a <div> or an <iframe> but we can't support that and it could break content on your page (!).

Now on to the code itself:

<!-- Ethnio Activation Code -->
<script type="text/javascript" language="javascript" src="//ethn.io/xxxxx.js" async="true" charset="utf-8"></script>

Performance note: Typical Ethnio JS files are about 7.6kb 🚀

That's deliberately pretty small. Here are some more technical details:

 - Just a comment explaining that the code below is the Activation Code. Doesn't actually do anything to your page.
type="text/javascript" - This tells the server what kind of code this is. In this case, it is Javascript.
language="javascript" - Another way of telling the server that this is Javascript, but is recognized by older browsers. We use them both to make sure that everyone sees the Ethnio code properly.
src="//ethn.io/xxxxx" - the // allows you to place it on a SSL or regular HTTP page without changing the code. It cleverly assigns HTTPS or HTTP dynamically.
async="true" - This just tells the browser to load everything else before it loads the Ethnio code.

More performance detail here: https://ethn.io/performance

Architecture

In terms of the overall system, here’s a detailed explanation of the main methods inside Ethnio:

Ethnio.should_display - Returns true or false. Checks several option before make decision
show or not screener.
Ethnio.get_cookie - Returns cookie stored by ethnio code
Ethnio.set_cookie - Set cookie for certain user to know that screener already displayed.
Ethnio.currently_displayed - Returns true if screener is showing right now
Ethnio.wheel_of_fortune - Magic function which implements 'Display Interval’
Ethnio.show - Main point of code for displaying screener / first page of screener
Ethnio.insertIframe - Prepare iframe for rendering second and third steps of screener