We fire several events on the document element of the website our form is active on. We do this so you can easily hook into our form events to work with data related to our forms.

We have the following events available:

  1. mopinion_ready
  2. mopinion_will_show*
  3. mopinion_shown*
  4. mopinion_will_hide*
  5. mopinion_hidden*
  6. mopinion_next
  7. mopinion_feedback_sent
  8. mopinion_redirect

*Not available for embedded forms.

You can use an event listener to hear when a Mopinion event has taken place. You can then use the occurrence of an event to trigger your own script. With your own script you can, for example, log your feedback in the browser console or push the feedback to your own analytics program.

The structure of the event listener is as follows:

document.addEventListener('[MOPINION_EVENT_NAME]', function(e) {
[YOUR_OWN_TO_BE_EXECUTED_SCRIPT]
});

Replace [MOPINION_EVENT_NAME] by one of the eight Mopinion Events.

Replace [YOUR_OWN_TO_BE_EXECUTED_SCRIPT] by your own script.

In the remaining part of this article, we provide for all 8 events scripts to log the event variables and values in the browser console, push the event variables and values in the Google Tagmanager dataLayer and how that will look in the console/dataLayer.

The events fired are as follows:

1. mopinion_ready

With this event, you know when a form is loaded, however not yet shown, on a page.

You can use the following JavaScript to display the events output in the browser's console:

document.addEventListener('mopinion_ready', function(e) {
console.log(e.detail)
});

Specific code to push the Event Object into the Google Tagmanager dataLayer:

<script type="text/javascript">
document.addEventListener('mopinion_ready', function(e) {
  dataLayer.push(e.detail)
});
</script>

The result in the console / dataLayer:

{event: "ready",
key: "[UNIQUE_FORM_KEY]",
formName: "[FORM_NAME]"}

 

2. mopinion_will_show

With this event, you know when the feedback button is clicked on.

You can use the following JavaScript to display the events output in the browser's console:

document.addEventListener('mopinion_will_show', function(e) {
console.log(e.detail)
});

Specific code to push the Event Object into the Google Tagmanager dataLayer:

<script type="text/javascript">
document.addEventListener('mopinion_will_show', function(e) {
dataLayer.push(e.detail)
});
</script>

The result in the console / dataLayer:

{event: "will_show", 
key: "[UNIQUE_FORM_KEY]",
formName: "[FORM_NAME]", 
triggerMethod: "[PASSIVE | PROACTIVE | EXIT]"}

 

3. mopinion_shown

With this event, you know when the feedback form is shown.

You can use the following JavaScript to display the events output in the browser's console:

document.addEventListener('mopinion_shown', function(e) {
console.log(e.detail)
});

Specific code to push the Event Object into the Google Tagmanager dataLayer:

<script type="text/javascript">
document.addEventListener('mopinion_shown', function(e) {
dataLayer.push(e.detail)
});
</script>

The result in the console / dataLayer:

{event: "shown", 
key: "[UNIQUE_FORM_KEY]",
formName: "[FORM_NAME]", 
triggerMethod: "[PASSIVE | PROACTIVE | EXIT]"}

 

4. mopinion_will_hide

With this event, you know when the closing cross or an area outside of the feedback form is clicked on.

You can use the following JavaScript to display the events output in the browser's console:

document.addEventListener('mopinion_will_hide', function(e) {
console.log(e.detail)
});

Specific code to push the Event Object into the Google Tagmanager dataLayer:

<script type="text/javascript">
document.addEventListener('mopinion_will_hide', function(e) {
dataLayer.push(e.detail)
});
</script>

The result in the console / dataLayer:

{event: "will_hide", 
key: "[UNIQUE_FORM_KEY]",
formName: "[FORM_NAME]", 
triggerMethod: "[PASSIVE | PROACTIVE | EXIT]"}

 

5. mopinion_hidden

With this event, you know when the feedback form is hidden again.

You can use the following JavaScript to display the events output in the browser's console:

document.addEventListener('mopinion_hidden', function(e) {
console.log(e.detail)
});

Specific code to push the Event Object into the Google Tagmanager dataLayer:

<script type="text/javascript">
document.addEventListener('mopinion_hidden', function(e) {
dataLayer.push(e.detail)
});
</script>

The result in the console / dataLayer:

{event: "hidden", 
key: "[UNIQUE_FORM_KEY]",
formName: "[FORM_NAME]", 
triggerMethod: "[PASSIVE | PROACTIVE | EXIT]"}

 

6. mopinion_next

If your feedback form consists of multiple pages this event, will let you know when navigation to a next page takes place. It also makes all the feedback given till that point available.

You can use the following JavaScript to display the events output in the browser's console:

document.addEventListener('mopinion_next', function(e) {
console.log(e.detail)
});

Specific code to push the Event Object into the Google Tagmanager dataLayer:

<script type="text/javascript">
document.addEventListener('mopinion_next', function(e) {
dataLayer.push(e.detail)
});
</script>

The result in the console / dataLayer:

{event: "next",
feedback: Array(#_OF_OBJECTS)
  {id: "[UNIQUE_SURVEY_BLOCK_ID]",
  label: "[IMPORT_VAR]",
  title: "[QUESTION]",
  type: "[DATAFIELD_TYPE]",
  value: "[VALUE]"
  },
  {id: "[UNIQUE_SURVEY_BLOCK_ID]",
  label: "[IMPORT_VAR]",
  title: "[QUESTION]",
  type: "[DATAFIELD_TYPE]",
  value: "[VALUE]"
  },
  etc.
  {label: "User Agent",
  type: "agent",
  value: [BROWSER_USER_AGENT]
  },
  {label: "url"
  type: "url"
  value: [URL_WHERE_THE_FORM_IS_SHOWN]
  },
  {label: "Page title"
  type: "category"
  value: [PAGE_TITLE_WHERE_THE_FORM_IS_SHOWN]
  },
  {label: "Role"
  type: "role"
  value: 1
  },
  {label: "Survey"
  type: "category"
  value: [FORMNAME]
  },
  {label: "Viewport"
  type: "viewport"
  value: [LENGTH x WIDTH]
  },
  {label: "Form trigger"
  type: "category"
  value: [PASSIVE | PROACTIVE | EXIT]
  },
  {label: "Form completion percentage"
  type: "form_completion"
  value: [PERCENTAGE_OF_PAGES_COMPLETED]
  },
  {label: "Customer ID"
  type: "customer"
  value: [UNIQUE_ID_GENERATED_ON_]
  },
  {label: "Survey ID"
  type: "id"
  value: [UNIQUE_SURVEY_RESULT_ID]
  }
key: "[UNIQUE_FORM_KEY]",
formName: "[FORM_NAME]", 
triggerMethod: "[PASSIVE | PROACTIVE | EXIT]"}

 

7. mopinion_feedback_sent

With this event, you know when the feedback form is completely submitted.

You can use the following JavaScript to display the events output in the browser's console:

document.addEventListener('mopinion_feedback_sent', function(e) {
console.log(e.detail)
});

Specific code to push the Event Object into the Google Tagmanager dataLayer:

<script type="text/javascript">
document.addEventListener('mopinion_feedback_sent', function(e) {
dataLayer.push(e.detail)
});
</script>

The result in the console / dataLayer:

{event: "feedback_sent",
feedback: Array(#_OF_OBJECTS)
{id: "[UNIQUE_SURVEY_BLOCK_ID]",
label: "[IMPORT_VAR]",
title: "[QUESTION]",
type: "[DATAFIELD_TYPE]",
value: "[VALUE]"
},
{id: "[UNIQUE_SURVEY_BLOCK_ID]",
label: "[IMPORT_VAR]",
title: "[QUESTION]",
type: "[DATAFIELD_TYPE]",
value: "[VALUE]"
},
etc.
{label: "User Agent",
type: "agent",
value: [BROWSER_USER_AGENT]
},
{label: "url"
type: "url"
value: [URL_WHERE_THE_FORM_IS_SHOWN]
},
{label: "Page title"
type: "category"
value: [PAGE_TITLE_WHERE_THE_FORM_IS_SHOWN]
},
{label: "Role"
type: "role"
value: 1
},
{label: "Survey"
type: "category"
value: [FORMNAME]
},
{label: "Viewport"
type: "viewport"
value: [LENGTH x WIDTH]
},
{label: "Form trigger"
type: "category"
value: [PASSIVE | PROACTIVE | EXIT]
},
{label: "Form completion percentage"
type: "form_completion"
value: [PERCENTAGE_OF_PAGES_COMPLETED]
},
{label: "Customer ID"
type: "customer"
value: [UNIQUE_ID_GENERATED_ON_]
},
{label: "Survey ID"
type: "id"
value: [UNIQUE_SURVEY_RESULT_ID]
}
key: "[UNIQUE_FORM_KEY]",
formName: "[FORM_NAME]", 
triggerMethod: "[PASSIVE | PROACTIVE | EXIT]"}

 

8. mopinion_redirect

With this event, you know when a link within a feedback form is clicked and to what page is being redirected.

You can use the following JavaScript to display the events output in the browser's console:

document.addEventListener('mopinion_redirect', function(e) {
console.log(e.detail)
});

Specific code to push the Event Object into the Google Tagmanager dataLayer:

<script type="text/javascript">
document.addEventListener('mopinion_redirect', function(e) {
dataLayer.push(e.detail)
});
</script>

The result in the console / dataLayer:

{event: "redirect", 
key: "[UNIQUE_FORM_KEY]",
formName: "[FORM_NAME]", 
url: "[URL_TO_WHICH_IS_BEING_REDIRECTED]"}