Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Select the element itself to add the website data that you want to include. You can add multiple data sources to this element. There are four five different sources that you can choose from.

  • URL parameters

  • JavaScript variables

  • CSS selectors

  • Cookies

...

  • Cookie names

  • Data attributes

...

URL parameter

If you want to collect the URL parameter, choose the URL parameter option and use the name of the parameter. Once added this will collect the value of the parameter.

...

https://demo.mopinion.com/survey/public/take-survey/abcdefghijklmnopqrstuvwxyz1234567890?user_id=DD19&user_email=Dd@test.nl&campaign_name=B&campaign_source=cart-abandonment&language=fr&nps=7

For the above URL, we would receive the URL parameter DD19 as user id:

...

Similarly for user email, campaign name, campaign source and NPS.

JS variable

In case you want to use a JS variable, the variable should be globally accessible, so for instance, if user_id is a global variable it will take the value it contains and pass it along as feedback (as a string). The variable can also be an object or array or even a nested object (for instance: test_object.user_id) if the value of the specified variable is an array or object it will be encoded into a JSON string. Basically, as long as the variable's scope is global we'll be able to pick it up.

For example, if you have a data layer, with the following input in your console:

...

The received website data will contain all elements in the data layer.

CSS selector

For the CSS selector option, you can use a tag, a class, an id, or, an attribute. If you want to use a class make sure to start with a dot, like this: .my-class. If you want to use an id you should use a hash, like this: #my-id. It will add the entire element where the class, id, attribute or tag is available.

...

For the above, you will receive the page titles.

Cookie name

The cookie option works similarly to the previous options. Just use the cookie name and the value will be added to the website data in your feedback results.

...

The above returns the cookie value of the cookie ‘lang’, which is the language in this case:

...

Data attribute

The data attribute option catches the data attribute of the closest selected element to the form.

...

The above, for example, can be used on an FAQ page, whereby people have opened a dropdown for a question, and then fill out the feedback survey. The survey will then get data from the first opened question, which will be received in your feedback inbox.

The results

The additional website data will be added to the feedback as soon as feedback is submitted by your website visitor.

...

Info

You can also use these variables in your chart builder to combine your website data with other feedback elements such as an NPS or Customer Satisfaction score. It is also possible to use the variables to trigger alerts/integrations and/or to create specific inbox filters (and/or add automatic tags).

Video walkthrough:

...

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":""}

...