TABLE OF CONTENTS




The Pop-Up Surveys allows you to create and edit your pop-up survey(s). This type of survey is ideal for collecting feedback inside your application (for example - customer portal) or on your website. You can find it in the menu Campaigns → Survey Suite → Pop-up Surveys.





 Distribution Tab: Embed Code

The Embed Code is used to integrate your Pop-up Survey into your 3rd-party app or website. This HTML code will need to be added into the HTML of your website. If you want to use it in a mobile app, you can use WebView - CustomerGauge does not provide an SDK for Pop-up Surveys. Depending on your goals, some basic coding knowledge may be required.


If you simply add it into the page, as soon as the page loads - the code will be triggered and the Pop-Up Survey will be shown. It is the responsibility of the host application to control when to trigger the pop-up invitation for its users. There can be certain use cases, for example, a button with an invitation to take a survey and trigger the code only once the button was clicked.



Providing data through parameters

You can pass additional data in the "params" section of the Embed Code to help identify the customer. This additional data can be useful for reporting purposes, as well as Close-the-Loop, and sending automated alerts.


If you're a business user, please align with your frontend team on the data needed. If you're a developer, please align with your business team on the data needed, prior to implementing the Embed Code.

 

Field Names

The JSON keys of the params object follow the same field names as shown in your system's Field Settings (please check System Admin → System Settings → Field Settings to find out the exact names to use or go to the distribution tab and add all the fields you need, you can copy them from the example there). Some examples of data that can be passed in the params section:

  • first_name
  • last_name
  • reference (Account unique identifier)
  • email
  • country
  • segment_a to segment_z
  • segment_1 to segment_5

Matching Contacts

Providing a email address allows CustomerGauge to associate the response with an existing Contact. However, we do recommend providing all the relevant data along with the Email address, just like you normally would using an upload.

 


Language / Locale

Please note that you should also specify the language that the pop-up should display. A Survey can contain multiple languages and you should indicate which language to display. You can find the list of language codes here. If no (valid) language is provided, the Survey will default to the first language from the language drop-down.




Good to Know for Reporting

Contacts

Every time the Pop-up Survey is being displayed, a new survey record is created. If no existing contact can be identified with the provided data, a new contact gets created and associated with the survey record. Contacts get identified either by Email or by Phone number.

Important: Please note that these contacts are also counted towards your Contact Package numbers.



Responses & Non-Responses

Every time the Pop-up Survey is being displayed, a Non-response record will get created. As soon as the survey gets completed, the Non-Response turns into a Response.



Survey Sent Date

The Survey Sent Date gets set when the Pop-up Survey gets displayed.



Duplication Rule

Pop-up Surveys do not adhere to the Duplication Rule set up in the system. They will open and create a non-response record every time you initiate the Pop-up initialization code.



Partial Completes

If you use Partial Completes, Non-Responses stemming from Pop-up Surveys will be updated to Responses once the configured time has past since the Pop-up Survey was first displayed.






Examples & Technical implementation

Introduction

This page holds some examples to help you get started and get inspired to embed your pop-up survey into your website or app. To use these snippets, some technical knowledge is required by the person embedding it.



Understanding the Embed Code

To work with these examples, you'll need to understand how to work with the different portions of the embed code. The embed code comes as a single code you can copy, but will need to be split up to work in the various examples.


<!--Survey Embed Code-->
<script type="text/javascript" src="https://survey.eu.customergauge.com/pop-up/pop-up.iife.js"></script>
<script>
CG.init({
  "surveyId": "xxx",
  "language": "en_GB",
  "params": {
    "Email": ""
  }
})
</script>
<!--Survey Embed Code-->


Loading the library

The first portion is the library that does all the work to control the pop-up. This should always be loaded before the pop-up is initiated.


<script type="text/javascript" src="https://survey.eu.customergauge.com/pop-up/pop-up.iife.js"></script>


Triggering the pop-up

The second portion is the JavaScript initialisation code that actually triggers the pop-up. As part of this code, additional information can be passed. In the examples, we'll refer to this section as "CG.init({});".


CG.init({
  "surveyId": "xxx",
  "language": "en_GB",
  "params": {
    "Email": ""
  }
})
  1. Replace "language" with the language code that you would like your survey to appear in. This language has to have been set up in your survey.
  2. In the params you can pass additional information, which will be stored as part of the Survey Record, which can then be used in reporting. The params is a single dimension JSON object consisting of key/value pairs.



Example 1: Listening to Survey Initialization Events

This example allows you to do something when the survey has been successfully initialized. This is particularly useful in combination with the other examples, such as setting a cookie, or keeping count of how many times the survey has been presented.

<script type="text/javascript">
CG.init({});

document.addEventListener("cg_survey_started", function(event) {
    // Do something
});
</script>



Example 2: Listening to Survey Complete Events

This example allows you to do something when the survey has been completed. This is particularly useful if you want to set a cookie once someone completes the survey, and use that to stop presenting the pop-up survey.

<script type="text/javascript">
CG.init({});

document.addEventListener("cg_survey_finished", function(event) {
    // Do something
});
</script>



Example 3: Listening to Survey Close Events

This example allows you to do something when the survey has been closed. This is particularly useful if you embedded the pop-up survey in an iframe or WebView, and want to decompose the iframe or WebView. This event triggers as soon as the user closes the pop-up itself.

<script type="text/javascript">
CG.init({});

document.addEventListener("cg_survey_closed", function(event) {
    // Do something
});
</script>



Example 4: Display only once (Cookie)

This example allows you to show the pop-up survey when it hasn't been displayed before for a certain period of time.


Preparation code

This code snippet needs to be loaded before the survey gets initiated.


<script type="text/javascript">
function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
</script>


Initialising the pop-up survey

if( ! getCookie( "cgPopupSurveyCookie" ) ) {

  let popupSurveyExpirationDays = 30;
  setCookie( "cgPopupSurveyCookie", "true", popupSurveyExpirationDays );

  CG.init({});

}
  1. Replace the value "30" with the number of days the pop-up survey should be suppressed.
  2. Replace "CG.init({});" with the initialisation code applicable to your use case.



Example 5: Show survey upon button click

This example allows you to make the pop-up survey appear when a button is clicked.


The button code

This is the HTML code for the button that can be clicked to make the pop-up appear. You will need to change it accordingly to add your own styling to it. If you choose to change the id attribute, this will need to be adjusted accordingly in the JavaScript code as well.


<button id="showPopupSurvey" onclick="popupSurvey()">Take Survey</button>


The JavaScript code

<script type="text/javascript">
function popupSurvey() {

	CG.init({});

	document.getElementById( 'showPopupSurvey' ).style.display = 'none';

}
</script>


  1. Add the button in your HTML code and apply any styling.
  2. Add the JavaScript code alongside the rest of your JavaScript code.
  3. Replace "CG.init({});" with the initialisation code applicable to your use case.



Example 6: Random chance to show survey

This example allows you to show the survey based on a random chance. This is useful if you want to make the survey appear to a random subset of your users.


<script type="text/javascript">
let popupSamplePercentage = 10; // Percentage chance of pop-up appearing
let popupRandomizer = Math.floor(Math.random() * 100 );
if( popupRandomizer < popupSamplePercentage ) {
    CG.init({});
}
</script>


  1. On the first JavaScript row, replace "10" with the percentage chance of the pop-up survey appearing.
  2. Replace "CG.init({});" with the initialisation code applicable to your use case.



Example 7: Delay showing the survey for X seconds

This example allows you to make the pop-up appear after a certain number of seconds. This is useful if the content of your page takes a while to load, or need to wait for some data to be pulled in to pass as part of the params.


<script type="text/javascript">
let popupDelay = 5; // The number of seconds of delay
setTimeout(function() {
    CG.init({});
}, popupDelay * 1000);
</script>
  1. Add the JavaScript code alongside the rest of your javascript.
  2. Replace the value "5" with the number of seconds the pop-up should be delayed.
  3. Replace "CG.init({});" with the initialisation code applicable to your use case.



Example 8: Centralised validation

This example allows you to control validation from a single place, rather than in-line if statements. This allows you to keep an easy overview to understand which criteria need to be met in order to make the pop-up survey appear.


Some examples that we've seen our customers use:

  • Show a pop-up survey at the end of an order;
  • But don't present a pop-up if the order was of low value;
  • And don't present a pop-up if a survey was presented during a recent previous order.


By having a centralised function where you verify if a user should receive a pop-up survey you keep a quick overview of the criteria, and can more easily combine multiple conditions.


<script type="text/javascript">
function shouldReceivePopupSurvey( data ) {
    // replace the data parameter with what you need to check

    if( ! data.shouldReceiveSurvey ) { return false; }
    if( ! data.daysSinceLastPurchase < 30 ) { return false; }
    
    return true;
}

if( shouldReceivePopupSurvey( data ) ) {
    CG.init({});
}
</script>
  1. Add the JavaScript code alongside the rest of your javascript.
  2. Replace the value "5" with the number of seconds the pop-up should be delayed.
  3. Replace "CG.init({});" with the initialisation code applicable to your use case.