How to enable the inMoment extension in your Survalyzer Workspace?

Survalyzer offers the possibility to easily embed a survey on any website you manage. In the following article, you will find a detailed description of the process of embedding a survey using a feature called Survalyzer inMoment Plugin.

Survalyzer InMoment: step-by-step activation process

Step 1: Contact Survalyzer

Contact your account manager or create a ‘Support Request’ using Survalyzer Ticket System, stating that you want to use Survalyzer InMoment Extension. As the InMoment Plugin is linked to your workspace, please provide the workspace ID and its name (where inMoment should be activated).

Step 2: Copy the required Survalyzer integration code

Once you receive activation confirmation from the Survalyzer Team, you will be able to copy the necessary code from the ‘Automation’ tab (available in your account). The code provided should be added to the HEAD section of your website.

Code example:

<script> (function (d, b, f, t, p) { const h = d.getElementsByTagName('head')[0]; const s = d.createElement('script'); const r = ('' + Math.random()).substring(2); document.currentScript.id = "svi_" + r; s.id = "svs_" + r; s.async = true; s.src = "https://" + t + "." + b + "/" + f + "?path=" + p + "&r=" + r; h.appendChild(s); })(document, "survalyzer.eu", "survalyzer-integration.js", "education", window.location.pathname)</script>

Please not that this is only an example code. Do not copy this code – Survalyzer will send you information when the code prepared specifically for you is ready to be copied.

Step 3: Check your Content Security Policy settings

If you use Content Security Policy (CSP), adjust your website settings and allow content from our domains to load.

If your account is located on a Swiss server, authorise access for *.survalyzer.swiss. For an EU server, do this for *.survalyzer.eu.

If wildcards cannot be used, please add to the whitelist:

– files.survalyzer.swiss / files.survalyzer.eu (depending on your data center)
– [yourtenant].survalyzer.swiss / [yourtenant].survalyzer.eu (depending on your data center);

Example – EU:

The tenant name is ‘mycompany’ and is stored on an EU server. In this case, add the following URLs to the whitelist:

files.survalyzer.eu
mycompany.survalyzer.eu

Example – Swiss:

files.survalyzer.swiss
mycompany.survalyzer.swiss

Step 3: Wait for the inMoment plugin to be activated in Survalyzer

Survalyzer will activate the inMoment extension in the workspace specified in the Step 1. A new tab will appear in the workspace next to the ‘Library’ item.

Step 4: Add your survey(s) to Survalyzer inMoment Extension

Once the inMoment plugin will be activated for the specified workspace, you will be able to add your surveys, which will be linked to your website. To do this, go to the new item added to your menu and then add a new synchronisation using the available button. This will launch a wizard that will allow you to configure the connection between the desired survey and your website.

Passing information from the website to the survey

At the end of the InMoment extension configuration survey, Survalyzer offers customers the option to transfer specific parameters from the page where the script has been integrated. The specified parameters are then transferred to the survey using the values of urlvar01 – urlvar20 and saved in the survey.

Survalyzer InMoment Extension with marketing tools (Google Tag Manager, Piwik PRO)

Integrating the Survalyzer inMoment Extension also allows you to track events related to the embedded survey. The InMoment Extension supports two tools: Google Tag Manager and PiwikPRO. What should you do if you want to connect your survey to your marketing tool?

General technical information

The Survalyzer InMoment Extension supports the following events:

survalyzer_survey_loaded (when the survey window is loaded)
survalyzer_survey_started (when the survey is started)
survalyzer_survey_completed (when the answers are submitted)
survalyzer_survey_abandoned (when the survey window is closed)

Example of the event data structure:

{ 
  event: "survalyzer_survey_completed", 
  survey: { 
    id: "survey_123", 
    hash: "surveyhash", 
    type: "modal", 
    trigger: "timer", 
    placement: "center" 
  }, 
  page: {
    url: window.location.href,
    path: window.location.pathname
  },
  timestamp: Date.now()
}

Here’s what it looks like in the console section of the website:

All the variables listed are supported in each of the events mentioned.

Please also note that the integration script of your marketing tool should be placed in the <head> section of your website or at the beginning of the <body> section of your selected page (on which you want events to be tracked).

Once you have set up configuration in your marketing tool (including variables, triggers and tags) – your events will be tracked.

If you also want to pass variables to, for example, Google Analytics, you will need to create a custom dimension in the admin panel of this tool. Otherwise, only general information about the triggered event will appear in your report.

Creation of necessary events in the marketing tool

As mentioned above, in your marketing tool you need to create variables, triggers and tags in order to link the data passed, for example, via the dataLayer to your website. Below is an example of the procedure for Google Tag Manager for a single variable passed via the dataLayer.

NOTE: If you want to pass more variables contained in the event, you must add each one separately. If you do not add variables to the tag in your marketing tool, only basic/default information will be passed to your analytics tool (without the detailed data contained in the Survalyzer event).

1 – Go to Google Tag Manager and open the ‘Variables’ section. Click ‘New’ to create a ‘User-Defined Variable’.

2 – Select the variable type: ‘Data Layer Variable’.

3 – The configuration of each variable should be similar:
– Type: Data Layer Variable
– Version: 2

The name of the Data Layer Variable should correspond to the event structure. Based on the structure provided, you can access nested variables using dot notation, for example: page.path, survey.hash, survey.trigger.

4 – Once you have added all the variables you want to pass to your marketing tool, you can move on to adding triggers. Go to the ‘Triggers’ tab and click ‘New’ to create it.

5 – Select the ‘Custom Event’ type.

6 – Enter the event name and select the trigger option based on ‘Some custom events’, where you can define conditions. We recommend adding conditions based on the specified event name so that the trigger is only activated when necessary. Once you have configured all the settings, click ‘Save’.

7 – Once you have created the variables and triggers, you will also need to create a new tag to link all these elements together. To do this, go to the ‘Tags’ tab and create a new tag. This will ensure that the data is also sent to Google Analytics (with the information contained in the variables being passed).

8 – Click ‘Tag Configuration’ and select ‘Google Analytics GA4 Event’.

9 – Enter you Measurement ID (from your account) and the necessary information regarding the trigger and variables you have created.

In the ‘Event name’, enter the name of the event from the dataLayer, and in the ‘Event parameter’ field, add the parameters you want to pass – in line with the variables created in the first steps.

On the left-hand side of the condition, you can enter a custom name of the variable (as it should be passed to your analytics tool). On the right-hand side, ener the variable name you created (in curly brackets) – in the same way as a placeholder, for example, {{survey.id}}.

10 – Once you have configured the tag, select the appropriate trigger – the one you created earlier. You can then click ‘Save’.

11 – When everything is ready, click the ‘Submit’ button to confirm the changes you have made to your Google Tag Manager configuration.

12 – To see detailed information in the analytics tool as well, you need to define the variables created in Google Tag Manager in Google Analytics too. To do this, go to the ‘Admin’ view in Google Analytics.

Then go to the ‘Custom definitions’ section.

13 – Click ‘Create custom dimension’.

14 – Select the correct ‘Event parameter’. Once selected, the dimension name should appear automatically. You can also add a description if you need to. Then click the ‘Save’ button.

When everything is ready, you can adjust the survey configuration in the inMoment Extension to send the configured data to your marketing tool.

Adjusting the inMoment Survey Configuration:

1. In the ‘Behaviour Data Enrichment’ section of the configured survey integration, select the option to enable tracking tool.
2. In the displayed question, select the desired tracking tool – Google Tag Manager or Piwik PRO.
3. If you select Piwik PRO – you can choose between the dataLayer or _paq approaches. With Google Tag Manager, events are sent via dataLayer by default.
4. Save the changes.

InMoment Extension isn’t working, what should I do?

If Survalyzer InMoment Extension is not working, the issue may lie in one of two areas. Either the inMoment Plugin is not loading correctly, or there is an error in the inMoment configuration. The following explanations focus on issues related to script loading.

Script Loading Problems

You need basic technical knowledge of the Google Chrome browser to understand the following steps.

1. Check if the script tag is integrated into the website

Open the web page you where the survey is to be loaded (e.g. https://survalyzer.com/survalyzer-enterprise-intercept/), and then click ‘View page source’.

Press CTRL + F on your keyboard and search for ‘survalyzer-integration.js’. If you find it, proceed to the next step. If you cannot find it, contact your website administrators to integrate the script.

2. Check if ‘survalyzer-integration.js’ is loaded

To do this, open the ‘Inspect’ tool by right-clicking. Then go to the Network tab and add a filter for JS files, as shown in the screenshot below. Next, reload the page and check if survalyzer-integration.js is in the list of loaded files.

If you cannot find the ‘survalyzer-integration.js’ file, contact your website administrator to check whether any website policies are preventing the ‘survalyzer-integration.js’ file from loading.

3. Check if survalyzer-survey.js file is loaded

As with survalyzer-integration.js, check if the survalyzer-survey.js file has been loaded correctly. You should find this file in the list of files in the Network section. When you hover your cursor over its name, check that the file path is correct (as shown in the screenshot below).

Note: if your account is on the Swiss server, you should see the path associated with files.survalyzer.swiss.

4. Check if your configuration has been loaded correctly

The last of the frequently encountered problems is the lack of a loaded configuration. To do this, after clicking ‘Inspect’, go to the ‘Sources’ tab. Then find the root path of your account ([yourtenant].survalyzer.eu or [yourtenant].survalyzer.swiss) and navigate to the survalyzer-integration.js file.

In the ‘poc’ variable, you should find the ID and parameters of your survey (e.g. expected behaviour or display method). If the value for the ‘poc’ variable is empty, check your survey configuration created in the Survalyzer application, and if you encounter additional problems, contact the Survalyzer Team.