All Collections
General
Getting Started
FunnelEnvy Snippet Installation
FunnelEnvy Snippet Installation

Installing the FunnelEny snippet for website optimization and personalization

Arun Sivashankaran avatar
Written by Arun Sivashankaran
Updated over a week ago

The FunnelEnvy snippet is required for most of the platform functionality. It collects data about visitors, tracks events and conversions and communicates with the backend services to deliver campaigns and integrations.

The snippet is lightweight Javascript asset that is installed on a customer's website delivered through the geographically distributed Fastly CDN and has minimal impact on site performance and will scale to very heavy load.

The first step in installing the snippet is to decide if you want to pursue the synchronous or asynchronous implementation.

Locating and Implementing Your Snippet

To locate your snippet, click on the Org Settings tab from the left hand sidebar in FunnelEnvy.

Synchronous vs Asynchronous Snippet Implementation

The two types of snippet implementation achieve the same thing (loading FunnelEnvy onto the page) but present tradeoffs. 

Synchronous (blocking) snippet Implementation

Synchronous implementation means that the web page will block until the FunnelEnvy snippet has loaded (typically less than 100ms) and no rendering will take place until the load is complete. Content masking performed by the FunnelEnvy snippet will be limited to pages where campaigns are running.

This snippet will need to be inserted on all relevant pages, including subdomains, on which campaigns will run. Best practice is to add the snippet to the <head>  of the page, as high as possible.

Asynchronous (non blocking) Implementation

Asynchronous implementation will allow the page to render as the FunnelEnvy snippet loads. Non blocking scripts often result in higher performance ratings from web performance tools and can be loaded via tag management solutions, however it introduces the possibility of content flash as the page can render before the snippet fully loads.

For this reason we recommend implementing an 'anti-flicker' snippet that uses CSS on every page where the FunnelEnvy snippet will be. This is lightweight JavaScript that uses a CSS style to "mask" the page until the FunnelEnvy snippet has fully loaded and can take over. It also includes an emergency "timeout" that will always remove the mask even if there are issues loading the FunnelEnvy snippet.

Note: We recommend deploying the asynchronous snippet before, or concurrently with the anti-flicker snippet. If the anti-flicker snippet is deployed without the asynchronous snippet the page will be blank for a few seconds (duration of the emergency timeout).

Please contact your FunnelEnvy support manager for more information, or assistance with, adding the FunnelEnvy snippet to your site.

Did this answer your question?