Implementation Guide for Web Intercepts with Javascript Details

When a visitor loads your page, the code displays the screener (if the screener is turned on), which then collects responses, if the user fills it out. Installing the activation code on your page does not mean that the screener will start appearing. The default state for all Ethnio recruiting screeners is "off." You need to log into your Ethnio account and turn the screener 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 Screeners >> 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:


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

Note: Typical JS files are about 7.6kb.

 - 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.

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

Performance

Covered in detail here: https://ethn.io/performance

So there you have it - you now understand the Ethnio code.