Experify Developer Documents

Owned by Rene Pfitzner
Last updated: Jan 26, 2024 by Niklas Etzel
12 min read

This document is a technical documentation to guide developers with the Experify setup.

 

Overview

Experify is a website plugin that allows online businesses to show, engage and connect their happy customers with undecided shoppers.

Example of the Experify Plugin

The Experify Plugin (see example above) is an overlay to your website, which is opened by clicking on several Experify Widgets implemented on your website. A non-technical overview of available Experify Widgets is available here.

Experify is set up in four steps:

 

  1. Add the Experify JS script to your website

  2. Add Experify Widgets

  3. Add Conversion Tracking (recommended)

  4. Integration & Customization Check (optional)

  5. Activation on your production website

Add the Experify JS script

In general every page, on which the Experify Plugin is supposed to be active, needs to integrate the Experify JS script. Below we outline the two most common options to integrate this script.

“CUSTOMERID” is a placeholder for your unique customer identification string (sometimes also called “brandID”). Your brand ID is displayed in the Settings tab of the brand dashboard. Still need access to the dashboard? Reach out to success@experify.io.

Option 1: Using a global tag manager

If you use a global tag manager, simply add the following script:

<script async src="https://assets.experify.io/js/experify_CUSTOMERID.min.js"></script>

 

Option 2: Manual Integration

In case you do not use a tag manager, simply add the following script to the end of the <body> of each webpage:

<!-- BEGIN Experify Plugin --> <script async src="https://assets.experify.io/js/experify_CUSTOMERID.min.js"> </script> <!-- END Experify Plugin -->

 

Integrating Experify Widgets

Experify provides various pre-defined widgets to trigger the Experify Plugin. Please see here for an overview of all available options.

The Button Widget

The Button Widget is a floating element on your website. It is the default widget and is readily available once you add the Experify JS script. When you are ready, you may customize and activate the button from your brand dashboard. Simply use the settings to customize where and how you would like the button to appear. When you are ready to go live, toggle the “Disabled” button on and the button will immediately appear on your site.

The Text Banner Widget

In principle, the Text Widget is simply an iframe on your website. However, since native iframe responsiveness is rather limited, an integration optimized for responsive design is achieved by instead dynamically injecting the iframe into a div, which can be controlled by the Experify JS to allow for smooth height transitions. Incidentally, this makes integration even easier.

To integrate the widget on your website, simply add the following code snippet:

<div id="experify-text"></div>

By default, the widget will stretch to 100% of the outer container. If you would like to give the widget some other defined size, please use the following code structure:

The widget height is determined automatically to fit the widget's content.

The Help Banner Widget

In principle, the Help Widget is simply an iframe in your website. However, since native iframe responsiveness is rather limited, an integration optimized for responsive design is achieved by instead dynamically injecting the iframe into a div, which can be controlled by the Experify JS to allow for smooth height transitions. Incidentally, this makes integration even easier.

To integrate the widget on your website, simply add the following code snippet:

By default, the widget will stretch to 100% of the outer container. If you would like to give the widget some other defined size, please use the following code structure:

The widget height is determined automatically to fit the widget's content.

The Map Widget

In principle, the Map Widget is simply an iframe in your website. However, since native iframe responsiveness is rather limited, an integration optimized for responsive design is achieved by instead dynamically injecting the iframe into a div, which can be controlled by the Experify JS to allow for smooth height transitions. Incidentally, this makes integration even easier.

To integrate the widget on your website, simply add the following code snippet:

By default, the widget will stretch to 100% of the outer container. If you would like to give the widget some other defined size, please use the following code structure:

The default height and width of the widget can be customised. In order to do it please add the following CSS snippet to your website and modify the values accordingly (the maximum supported resolution is 1320x632 on desktop and 600x632 on mobile):

The Map-Only Widget

In principle, the Map-Only Widget is simply an iframe in your website. However, since native iframe responsiveness is rather limited, an integration optimized for responsive design is achieved by instead dynamically injecting the iframe into a div, which can be controlled by the Experify JS to allow for smooth height transitions. Incidentally, this makes integration even easier.

To integrate the widget on your website, simply add the following code snippet:

By default, the widget will stretch to 100% of the outer container. If you would like to give the widget some other defined size, please use the following code structure:

The default height and width of the widget can be customised. In order to do it please add the following CSS snippet to your website and modify the values accordingly (the maximum supported resolution is 1320x632 on desktop and 600x632 on mobile):

Custom Trigger Elements

If you want to use custom elements to trigger the Experify Plugin, this can be done in the following way.

  1. Add the html class experifyTrigger (please mind the cases!) to any html element that should act as a trigger to open the Experify Plugin. The Experify JS script will listen for click events on such elements and will open the Experify Plugin. Example for a generic div element:

  2. If you add more than one trigger element to your website, make sure that you number the experifyTrigger classes in the following way, to allow for more granular analytics:

Text Link Triggers

You can easily use in-text links as Experify triggers as well. To do so, adjust the URL / href as follows:

Conversion Tracking & Attribution

Measuring conversions and conversion attribution is important to gain insights into the impact of your Experify offering. We offer multiple ways of tracking and attribution, depending on your tracking needs and already existing analytics stack.

Experify-Managed Conversion Tracking

The simplest and directly usable conversion tracking we offer is “experify-managed tracking”. With this, you will be able to see your total and experify-attributed conversions directly within the Experify dashboard, without the need to utilize a 3rd-party tracking solution like Google Analytics.

There are two methods readily available for experify-managed tracking. The “JavaScript Method” (described below) is the preferred method, as it provides more flexibility and consistent results. However, it does require a bit of advanced web development knowledge. For this reason, we additionally offer a simplified “CSS Method” that does not require any knowledge of javascript and should be compatible with all major website creators. Note that this method, if used improperly, is more prone to tracking errors and wrong attribution. We recommend the “Javascript Method”.

Note that the ExperifyJS script needs to be implemented on the pages you want either of the below methods to work.

Experify-Managed Tracking: JavaScript Method (preferred)

Use the provided JavaScript function Experify.trackConversion() to track conversions. This method can be used as follows:

  1. Define what event you want to track where. Prominent choices are a successful checkout event or the loading of a checkout confirmation page.

  2. Call the Experify.trackConversion() function when the defined conversion event is triggered on your website.

This function will handle the tracking of conversion events, visible in your Experify dashboard.
This is the preferred implementation of conversion tracking.

Note (Invoking conversion tracking on page load)

In case of invoking events on page load (for example purchase confirmation page) please make sure function is invoked after script is fully loaded. It can be done with following code snippet:

Experify-Managed Tracking: CSS-Class Tracking (simplified)

To track conversions using this method, follow these steps:

  1. Identify the call-to-action element on your website that you want to track (e.g., "buy" button or "add to cart" button).

  2. Add the following CSS class to the selected call-to-action element:

  3. Typically, you would add this class to buttons such as "checkout," "add to cart," or "buy."

The Experify JavaScript script will attach a listener to this element and trigger a conversion event when the element is activated. The conversion measurement will then be visible in your Experify analytics dashboard.

This method is provided to ease implementation, especially for the non-technical user, since it can easily be set up no matter what CMS and website hosting provider you use. However, please note that this method is less reliable than Method 1 since custom CSS, which is rather common, can result in the failure of tracking with this simplified method.

Note: Choose one method only

It's important to note that you should choose only one of the above mentioned Experify-managed methods for tracking conversions on your website. Using both methods simultaneously can lead to inaccurate data and measurement discrepancies.

Note: Privacy and Anonymity

Please be aware that these “experify-managed tracking” methods above are simplified conversion measurements performed anonymously and in a privacy-conserving manner, conforming to legislations like GDPR or CCPA. The data is aggregated and does not involve storing or processing personal user data. This ensures that user privacy is respected while providing valuable insights into conversion performance.

Advanced Tracking Options (Google Analytics, Klaviyo, etc.)

If you already utilize an analytics and tracking solution like Google Analytics, and/or a Customer Data Platform like Klaviyo, you can use the following solutions to achieve a more customized conversion tracking. Please be aware that the Advanced Tracking Options described below, depending on your specific implementation, might not be anonymous and privacy-conserving, so be aware of your local legislation.

Advanced Option 1: Conversion attribution with Google Analytics, Adobe Analytics, etc.

If you already use a 3rd-party solution for conversion tracking, you might want to continue doing so. In this case, you have the possibility to add an “experify attribution” property to your conversion event. This way, you will be able to segment your tracked conversions into “experify-attributed” and “not experify-attributed” conversions.

 

  1. Make sure the Experify JS is available on the page that triggers your conversion tracking (e.g. the checkout page)

  2. Before you call your conversion event, call function.

This function will return one of two string values experify-attribution-30d or no-experify-attribution, indicating whether in the last 30 days the current user used the Experify plugin during their purchase funnel.

  1. Send the return value of above function as attribute alongside your conversion event.

 

Example Conversion Tracking with Google Analytics

1. Ensure Basic Google Analytics Setup

First, make sure you have Google Analytics (GA4) properly set up on your ecommerce site. This includes:

  • Creating a Google Analytics account if you don't have one.

  • Setting up a GA4 property for your website.

  • Integrating the GA4 tracking code into your website.

 

2. Ensure Experify JS is available

Make sure the Experify JS is available on the page that triggers your conversion tracking (e.g. the checkout page).

 

3. Customize Google Analytics for Conversion Tracking

Next, you'll set up conversion tracking in Google Analytics, if not done already.

  • In Google Analytics, navigate to the "Events" section in your GA4 property.

  • Mark the event(s) you consider as conversions (like a purchase event) as a "Conversion" by toggling the conversion switch.

 

4. Modify Tracking Code for Custom Attribute

You'll need to modify your site's tracking code to include the Experify attribution data. This involves capturing the Experify attribution value and sending it with the conversion event to Google Analytics.

Here's a basic outline of what this might look like in JavaScript:

5. Test and Validate

After implementing, test the setup to ensure that:

  • The Experify attribution is being captured correctly.

  • The custom event with the Experify data is being sent to Google Analytics.

  • Google Analytics is correctly receiving and displaying this information.

You can use the "Realtime" report in Google Analytics to view live data and confirm that your setup is working.

 

6. Use Google Analytics for Advanced Analysis

Once your data is correctly flowing into Google Analytics, you can:

  • Create custom reports to analyze your conversion data along with the Experify attribution.

  • Segment your data based on the Experify attribution to understand its impact on conversions.

 

Note on Implementation

  • The JavaScript code provided is a basic example. Depending on your website's structure, the implementation might vary.

  • Ensure that you are complying with all relevant data privacy regulations (like GDPR, CCPA) when tracking user data.

  • If you're not familiar with JavaScript or Google Analytics configuration, consider consulting with a web developer or a Google Analytics expert.

 

Advanced Option 2: Experify event tracking with any CDP

If you want to set up a more granular event tracking that can be used by yourself to decide on conversion attribution, you can utilize your own customer data platform or other data collector to do so. Please consult the Experify CDP integration for details about this possibility.

Integration Check & Customization

To make sure the integration of Experify is correct and functional, send an email to success@experify.io with the subject Integration Check Request.

Although you can directly embed the script and widgets on your production website, we encourage first to test everything on a test environment or a subpage of your website that normally isn't reachable for your audience. No matter your choice, please share the link in your Integration Check Request email.

In case you are using the Button Widget, you can let us know if you want to change the positioning of the Button. Also, you can let us know if you want he button to be excluded from, or only included on, certain url paths (in case you chose to inject the Expeirfy JS globally).

In this case, please fill out this customization form.

 

Opening the Experify Plugin on pageload: URL parameter

The Experify Plugin can also be opened by passing a url parameter experifyact=1

Example: https://www.your-brand-url.com?experifyact=1

This is useful for many use cases where you want your website visitors to directly see the Experify Overlay, e.g. as part of an email campaign.