Page Comparison

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:

mopinion_

...

loaded
mopinion_

...

shown

...

mopinion_

...

hidden
mopinion_

...

next (standard forms only)
mopinion_

...

previous (standard forms only)
mopinion_feedback_sent
mopinion_redirect

...

mopinion_question_answered (conversational forms only)

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.

...

Code Block

language	js

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

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

Replace [YOUR_OWN_TO_BE_EXECUTED_SCRIPT] by with your own script.

In the remaining part of this article, we provide scripts 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 Tag Manager dataLayer and how that will look in the console/dataLayer.

The events fired are as follows:

1. mopinion_

...

loaded

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

...

Code Block

language	js

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

Code Block

language	js

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

The result in the console / dataLayer:

Code Block

language	json

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

2. mopinion_

...

shown

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

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

Code Block

language	js

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

Code Block

language	js

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

The result in the console / dataLayer:

Code Block

language	json

{
	event: "will_showshown",

	key: "[UNIQUE_FORM_KEY]",
	formName: "[FORM_NAME]",

	triggerMethod: "[PASSIVE | PROACTIVE | EXIT]"
}

...

3. mopinion_

...

hidden

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

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

Code Block

language	js

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

Code Block

language	js

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

The result in the console / dataLayer:

Code Block

language	json

{
	event: "shownhidden",

	key: "[UNIQUE_FORM_KEY]",
	formName: "[FORM_NAME]",

	triggerMethod: "[PASSIVE | PROACTIVE | EXIT]"
}

...

4. mopinion_

...

If your standard feedback form consists of multiple pages this event, will let you know when the closing cross or an area outside of the feedback form is clicked onnavigation to the next page takes place. It also makes all the feedback given until that point available. The array with all possible questions is updated with the value of the answered question till then.

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

Code Block

language	js

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

Code Block

language	js

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

The result in the console / dataLayer:

Code Block

language	json

{
	event: "will_hidenext",

	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 event's output in the browser's console:

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

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

The result in the console / dataLayer:

Code Block
{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 until that point available.

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

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

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

The result in the console / dataLayer:

Code Block

{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 event's output in the browser's console:

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

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

The result in the console / dataLayer:

Code Block

{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 event's output in the browser's console:

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

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

The result in the console / dataLayer:

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

...

,
	feedback: [
		{
			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]"
		},
		...(rest_of_survey_fields),
		{
			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]
		}
	]
}

5. mopinion_previous

If your standard feedback form consists of multiple pages this event, will let you know when navigation to the previous page takes place. It also makes all the feedback given until that point available. The array with all possible questions is updated with the value of the answered question till then.

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

Code Block

language	js

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

Code Block

language	js

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

The result in the console / dataLayer:

Code Block

language	json

{
	event: "previous",
	key: "[UNIQUE_FORM_KEY]",
	formName: "[FORM_NAME]",
	triggerMethod: "[PASSIVE | PROACTIVE | EXIT]",
	feedback: [
		{
			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]"
		},
		...(rest_of_survey_fields),
		{
			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]
		}
	]
}

6. mopinion_feedback_sent

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

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

Code Block

language	js

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

Code Block

language	js

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

The result in the console / dataLayer:

Code Block

language	json

{
	event: "feedback_sent",
	key: "[UNIQUE_FORM_KEY]",
	formName: "[FORM_NAME]",
	triggerMethod: "[PASSIVE | PROACTIVE | EXIT]",
	feedback: [
		{
			blockType: "[QUESTION_TYPE]",
			field: "[QUESTION_TYPE_&_UNIQUE_SURVEY_BLOCK_ID]",
			id: "[UNIQUE_SURVEY_BLOCK_ID]",
			label: "[IMPORT_VAR]",
			title: "[QUESTION]",
			type: "[DATAFIELD_TYPE]",
			value: "[VALUE]"
		},
		{
			blockType: "[QUESTION_TYPE]",
			field: "[QUESTION_TYPE_&_UNIQUE_SURVEY_BLOCK_ID]",
			id: "[UNIQUE_SURVEY_BLOCK_ID]",
			label: "[IMPORT_VAR]",
			title: "[QUESTION]",
			type: "[DATAFIELD_TYPE]",
			value: "[VALUE]"
		},
		...(rest_of_survey_fields),
		{
			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]
		}
	]
}

7. 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 event's output in the browser's console:

Code Block

language	js

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

Code Block

language	js

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

The result in the console / dataLayer:

Code Block

language	json

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

...

8. mopinion_question_answered

With this event, you know when a question in a conversational form has been answered. The array with all possible questions is updated with the value of the just-answered question. The ending element tells what the last answered question was up till that point. As a value, the question title is provided.

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

Code Block

language	js

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

Specific code to push the Event Object into the Google Tag Manager dataLayer:

Code Block

language	js

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

The result in the console / dataLayer:

Code Block

language	json

{
	event: "question_answered",
	key: "[UNIQUE_FORM_KEY]",
	formName: "[FORM_NAME]",
	triggerMethod: "[PASSIVE | PROACTIVE | EXIT]",
	feedback: [
		{
			blockType: "[QUESTION_TYPE]",
			field: "[QUESTION_TYPE_&_UNIQUE_SURVEY_BLOCK_ID]",
			id: "[UNIQUE_SURVEY_BLOCK_ID]",
			label: "[IMPORT_VAR]",
			title: "[QUESTION]",
			type: "[DATAFIELD_TYPE]",
			value: "[VALUE]" <-- updated by the question
		},
		{
			blockType: "[QUESTION_TYPE]",
			field: "[QUESTION_TYPE_&_UNIQUE_SURVEY_BLOCK_ID]",
			id: "[UNIQUE_SURVEY_BLOCK_ID]",
			label: "[IMPORT_VAR]",
			title: "[QUESTION]",
			type: "[DATAFIELD_TYPE]",
			value: "[VALUE]" <-- to be updated by the next question
		},
		...(rest_of_survey_fields),
		{
			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]
		},
		{
			label: "Ending element"
			type: "[DATAFIELD_TYPE]",
			value: "[QUESTION]",
		}
	]
}

...

Note
The labels `role`, `Survey ID` and `Customer ID` are for Mopinion internal use. We advise to not use these labels in any of your further data processing.

Info
Some content in the output is available in different ways. `label: "Form trigger"` and `triggerMethod:` both tell whether a form was triggered `PASSIVE`, `PROACTIVE` or `EXIT`. `label: "Survey"` and `formName:` both provide the name of the form.

Easy html macro

theme

{"label":"solarized_dark","value":"solarized_dark"}

contentByMode

{"html":"<div id=\"surveyContent\"></div>","javascript":"var confluenceData = {};\nvar pageId;\nvar pageTitle;\n\ntry {\n confluenceData = JSON.parse(parent.window.name);\n var pageId = confluenceData.options.productContext['page.id'];\n var pageTitle = confluenceData.options.productContext['page.title'];\n} catch(e) {}\n\nvar src = 'https://collect.mopinion.com/assets/surveys/2.0/js/survey.min.js';\n\nvar vars = {\n key:'211a4fdb96626776846147095cc335b448e20458', \n domain:'app.mopinion.com', \n divName:'surveyContent', \n button:false, \n use_collect:false, \n useQuerySelectorAll:false\n};\n\nvar s = document.createElement('script');\ns.async = 'async';\ns.id = 'mopinionFeedbackScript';\ns.src = src;\ns.onload = s.onreadystatechange = function() {\n if (!s.readyState || s.readyState === 'loaded' || s.readyState === 'complete') {\n try {\n srv.loadSurvey(vars);\n } catch (e) {}\n }\n}\ndocument.head.appendChild(s);","css":""}

Versions Compared

Old Version 4

New Version Current

Key

1. mopinion_

loaded

2. mopinion_

shown

3. mopinion_

hidden

4. mopinion_

next

5. mopinion_hidden

6. mopinion_next

7. mopinion_feedback_sent

8. mopinion_redirect

5. mopinion_previous

6. mopinion_feedback_sent

7. mopinion_redirect

8. mopinion_question_answered