So, hello everyone, thank you for joining this second day of the MatomoCam.
We are very excited to start this second day with a session from Thomas Pearson, who is
a business developer at Digitalist Sweden.
Thomas has worked with tracking digital analytics since 2010 and has been a contributor to open
source since 2007.
In this talk, Introduction to the Matomo User Feedback Plugin, he will demo the functionality
of this form builder plugin in Matomo.
So I'm giving the word to you now, Thomas.
Okay, thank you very much.
I'm just going to wait a few seconds because I see that people have problems with the stream
now and it seems to work better now.
All right, so thanks for the introduction.
Yes, so this has been my pet for about a year or actually longer than that, but it's been
something I've been working on weekends and evenings as you know, you do when you have
some passion.
But today I'll be really happy to present it to a larger audience.
So as you see, this is a plugin for Matomo and we'll get to the demo part pretty soon.
I got a slight introduction, but I'm Thomas, I'm a generalist when it comes to the web.
I've been programming, I've been project manager and today I'm more of a business developer
but I still actually do programming and I love Matomo, has been part of my life 24-7
for the last four years almost.
So I'm starting to learn Matomo pretty well these days.
I work for Digitalist, we're a digital product agency and we really love open source.
We've been contributing to open source for a really long time and we will continue doing
so and Matomo is where I work today, but my background has been within the Drupal community.
I started contributing to Drupal in different ways around 2005, 2006, somewhere around that.
But working with Matomo for the last four years at least.
So why are we here?
Well, why are we at the Matomo camp at all?
William Edwin Stemming is actually my favorite quote guy, so we'll start the day with a quote.
So why are we using web analytics at all and what is he saying about this?
Well, because I need to create reports, right?
Or maybe not, because this is maybe not why we're using web analytics.
His real quote is actually without data, just another guy with opinions and I think this
sums up why you should use web analytics, even though the first row is probably what
most people use a tool like Google Analytics because their boss told them they need to
create reports for their organization.
But if you think about it, it's the second quote, the real quote that is hopefully why
you're collecting data about your applications because you want to make decisions that are
not based on opinions.
So if we take a little deeper look at this, I usually talk about maturity for organizations
when we work with web analytics and I usually divide these into three different categories.
We have the reporting as I joked about in the first step.
So reporting is really about making data readable for humans.
We have a lot of data in our servers or in the Matomo database, but to make it possible
for me or you to understand the data, we need to visualize it, create a table, create a pie
chart or whatever so that we can start to understand the data.
The second step, when we do have the reporting, we can start to analyze the data, creating
insights basically, or actually trying to create insights because when we do analysis,
sometimes we can actually come up with an insight.
So if we break it down again, the first step is about making data readable for humans so
we can start analyzing.
That's the only value we add to the organization when we start or when we do reporting.
We make it possible for people to do analysis.
The analysis step is really about understanding data.
This is where we start to ask why.
When we see the page views report, for instance, we really need to...
So where were we?
I was talking about reporting.
The only value of reporting is actually making data readable for humans.
So when we have the reporting in place, we can start to do analyzes.
We can try to understand the data and this is the step where we ask why repeatedly.
Why do we have more page views this week than last week, et cetera, et cetera.
When we start to ask these questions and maybe dig into other types of data or when we start
to do combined data, we apply the dimensions we have to the data and twist and turn the
data so that we learn about what we're actually seeing.
We can start to see patterns in the data.
When we see patterns in the data, sometimes this leads us to insights and with these insights,
we can hopefully start to make data-driven decisions.
So think about it again.
When you're just sending email reports around to your organization, what value are you actually
giving the organization?
Well, not a lot, I would say.
We really need to get away from this behavior to just create email reports and send them
around because to be honest, the people here at MatomoCamp are probably pretty good at
the step two and three.
We work with data for a really long time, but sending the page view report to a person
that is not used to working with data, they will come up with bad understandings of the
data.
The most common example is probably when we see that page views has raised and people
get really happy, but that is for me, the only thing I would do when I see that the
page views has doubled from one week to another is to really be suspicious.
Something must be wrong here, right?
That's the natural behavior of data scientists or data analysts to really start to ask the
question why.
So why am I talking about this when I'm supposed to present a plugin for Matomo?
Well, it leads us because I really want us to start creating better decisions, basically.
The thing that we're missing in a tool like Matomo is the qualitative data.
This is really about getting the full understanding of our users, so we need both of these to
make really good decisions, and I will try to explain why, because the quantitative data,
the numbers that we collect, they really tell us things like, okay, we got more page views
or more people converted on our site.
We can really validate behaviors or maybe find problems, like if the page views doubled
from last week, maybe we have a problem, maybe we have spam bots getting to our websites
or I don't know, it could be anything.
But to really understand that, we often need qualitative data to understand why people
are angry or yes, they signed up, but were they happy when they did so.
So we really need to understand behaviors or problems, and that we can do with qualitative
data.
And qualitative data is, of course, when we get emotions or text feedback or whatever.
So this has actually been the reason why I created this plugin, because working with
analytics or websites as a product owner, you really start to understand that you need
more than just the numbers coming from a tool like Matomo or a Web Analytics tool.
So that leads us to my vision for this plugin.
It's been my little baby for, I think I came up with the idea five years ago, and not really
in a Matomo context, but more in a general Web Analytics context where I, of course,
wasn't using survey tools available online, but I really wanted to have data in combination
with my Web Analytics data.
And the vision here is really to add qualitative data to Matomo so that we can help users to
make data-driven decisions.
And that we can do only if we start to combine the qualitative and quantitative data fully.
And hopefully that's something we can do with this plugin.
So the basic concepts of the plugin is that we can create forms.
There's a form builder in the tool, of course, so we can do this, of course, demo this soon.
And the next step is that we can publish these forms on our websites, of course, and we do
have a great tool for doing so in Matomo already.
So we built this solution around the Tag Manager, so you use the Tag Manager and the knowledge
we already have to publish this service or forms into our website.
And we can also style them within the Tag Manager to decide how the look and feel should
be.
And last but not least, we can actually collect the data within Matomo and we can use the
standard reporting and we're looking into that soon.
So now I think it's about time to demo this.
So let's look at how this type of feedback can look like.
So what we're looking at right now is our website, digitalist.se, and here on a page,
I have a little question, did you find what you were looking for?
We have a yes, no partly, and we can also rate this page and I can send this feedback
and I get a feedback saying thank you for testing.
This form here comes from the user feedback survey tool within Matomo and I will soon
show you how the backend interface works.
So going into our Tag Manager, or actually when you install the plugin, you will get
a new menu up here saying user feedback.
So when I click on that, we get more menu items.
So on this page, we can see that all the forms that I created on the site, the concept right
now is that we can create templates and the template basically defines the structure of
the form.
As you can see here, it looks pretty techy if I click edit on this one, you will see
that you will get a JSON file defining the fields and the widgets that the form contains.
This is actually something we're rebuilding right now.
So when I release the full version, we will actually not have the templates, but we will
look into that later on.
So how I do this right now is that I create a new form.
You can call it Thomas demo form.
Let's give it the description and then I select the template I want to use.
So I will use this one.
And based on what template I select, I get a different set of configurations.
In my template, I can also define the default values for these fields.
So this one is actually a radio widget with three values that I can display to the users.
So we can change this to, do you like that or no?
That's no park.
It's probably a pretty good answer, right?
We can add another options.
We can force the users to write this and then we have this break this page.
So great how much you like Matomo, right?
And we have five stars to do that.
And then we have send feedback and thank you for your feedback on Matomo is what I will
respond to the users after submitting.
So by doing so, I have created a new form, Thomas demo form.
And after having this form in place, I can go to the tag manager and publish this on
my site or we go to the tag manager.
So having this plugin installed, I can just click on create a new tag, scroll down and
select the user feedback tag.
And in this, you have a lot of configuration options.
The first one is to select the form that you want to display.
So down here, I have my demo form.
The second option is that I can decide how to display this.
I will show all these examples pretty soon.
The first one is a model.
I will just bring up a model on top of the page and I will not do much more than this.
The second thing is that I need to decide the trigger.
So what will trigger this feedback form?
So I will actually, let's see if I have some good ones here.
I will create a new trigger actually.
I will do it pretty simple.
I will do it on a page view where the page URL contains question mark equals demo.
I will explain why I do this.
So creating this trigger, I should probably name it better, page view demo.
We're actually live changing our website right now.
So after this, I will, of course, publish a new version, create a new version and publish.
And then I can go back to my site.
And what I added was page view trigger.
So I will actually look at this URL parameter.
So if I have the URL parameter, question mark equals demo, this will actually trigger this
service.
And this one is a bit slow on our side, so we'll just make sure it works.
It's actually an issue we have in this particular installation that I need to look into.
That's another question.
Let's see if it's loaded, sorry, I lost it.
Let's see.
Let's see if it's published as well.
So let's go back again, reload the page.
Okay, so that didn't work.
I think we can go to another page demo.
Sometimes there is caching going on here.
Or I did something wrong.
That might be true as well.
Let's go back to the tag manager and see what I did.
So we have a tag with the demo form.
Oh, I know what I did.
I didn't save, I didn't save it, I think, no, I didn't.
This is something I usually forget.
I'd never saved the actual tag, so I wonder why it didn't work.
Hit view demo, and I selected the form called Thomas demo form.
So what I actually forgot was to do the create tag.
I only created the trigger before, so let's publish it.
So meanwhile, we're waiting for our slow tag manager publishing.
I can answer the first question I see in the chat.
So how accessible are these forms?
Well, we tried to look into accessibility.
Accessibility is quite hard for us to control 100% because we're injecting code into a website
and we're not fully owning this.
But the way we try to do it, at least, is to apply as little CSS as possible.
We apply some CSS styling just to make it readable.
So when I've been building this, I've been trying to test it from an accessibility perspective.
We also had some accessibility consultants looking into the actual results of the forms.
All right.
So now it should be published.
Let's go back to the site and reload and hope yes.
So do you like Matomo?
Yes, no, partly.
Of course, I like Matomo, and how much do I like it very much?
Sending the feedback.
So it seemed to work now.
So this is the basic concept of how to do this.
So we have the form and we have the tags.
And if you know your way around tag managers, you understand how powerful this is.
We can come up with pretty awesome rules on how to display these forms on a website.
I will also show you some other examples of how we can display these forms.
Actually, I do have...
Let's go back to the form I just created.
There we go.
So the first option here was to display this form as a model taking over the page.
But maybe I want to display this as a feedback button instead.
So selecting this option gives me the option to control this button.
And the default text here is just feedback, but that's called feedback on Matomo instead.
I want to display this on the right side of the page, and we'll just go with the default
options of black text and a grayish background color.
And I'll update this and publishing again.
Let's see, a bit slow.
So we have time.
Please ask questions in the chat if you have them.
We'll actually do this faster next time.
We don't have to wait for the publishing.
Maybe someone have a solution to why our tag manager is slow.
This is frustrating.
Okay.
So let's reload the page, and now you can see that we've got a feedback button coming
up on the right.
So instead of having the overlay, I'm just displaying this as a feedback button and clicking
on that, we bring the form up.
And of course, we continue to click yes.
And right now I'm a bit frustrated because of the slow tag management publishing.
So we'll do three.
So send feedback.
Okay.
So that's great.
You can see that we can display them in different ways.
I will show the last example later on.
But before that, we go into the actual reporting.
So when you have user feedback installed, you will actually have a new report in your
reporting interface displaying the summits.
So as we built it right now, it's quite techy.
So we will only get information on where this happened on the page URL.
You will get the information about which form we submitted.
This is a form ID.
We also collect the visitor ID.
This gives us the option to actually apply segments on top of our form submits.
So having a lot of form feedback on your site.
If you're rating the page or whatever, you can actually start applying.
Okay.
I want to see only the visitors with Firefox or maybe from a customer segment coming from
a custom dimension or whatever.
This is actually one of the nicest things about combining the qualitative and quantitative
data within Matomo.
You can apply the segments on top of your feedback service.
The results you can see here, so what's coming in is actually the name of the field and the
data coming in.
This is obviously something that will work to create more visually attractive interface
in the long run.
So adding more widgets to display this and even have custom reports coming for the dashboard
where you can select an individual form and present that in different ways.
But for now, we have it in this format.
What's really nice is that you can actually export this data already by clicking here
and use the API of Matomo to add this feedback data into Excel or whatever.
Yes, a question here, can you filter out based on the responses?
So maybe I just want to have people that answered three or lower on this to only get the unhappy
users.
So you can't do it right now in the interface.
We have been playing around with that and it's definitely a feature we plan to release,
but right now you basically have to export the data and do that in an external tool.
But it's definitely something we played around with, but it's been a bit harder than we thought
in the beginning to achieve.
But it's still quite powerful to have it in this way.
Another thing is that why can I create a segment based on the rating of the page?
So maybe I want to create a segment based on everyone that voted lower than three to
just segment out unhappy users to start analyzing that.
That's also a feature that we plan to build, of course, not implemented right now, but
it's definitely possible since we're connecting data to visitors and it's more about building
that interface.
But as you start to understand what it's really, really powerful when you start to combine
these data sets with each other to be able to do those things.
What else?
Let's look at the last option.
Actually if we go back to this page and we scroll down here, you can see that this form
is actually displayed within the markup of the page.
And this is actually the last display type we have.
So going back to the Tag Manager, I will actually look at, let's see if I think it's this one.
Yes.
So the styling is called raw inline.
And when I select that, I can also check this one, show advanced display controls.
And when I do so, it's getting pretty techy, but I can actually select the query.
It's a query selector.
So if I go back to my page and we inspect here and actually see that we have a div called
Feedback Form Demo, and I think this is the one that I use.
Yes.
So I'm having a query selected with the Feedback Form Demo, and this means that the form will
be injected into that div.
That could be anything on the page.
I could go down to the footer and add it to the contact section or whatever.
If you know your JavaScript around, this is pretty simple.
What you can also control is whether you want to append it on the end of this element or
on the beginning.
So this is again JavaScript.
So you can decide if you add it to the body feed, for instance, of the page.
You can decide whether to append it in the beginning, before all other elements, or in
the end.
We can also add styling to these forms.
So in this case, I wanted a particular background color.
But the nice thing is that we're actually inheriting styles from the site.
So since we're adding it to the page, we're actually inheriting fonts and whatever from
the site.
So there are a lot of ways that we can actually add style sheets to our own CMS and just inherit
that to all the forms, which is, of course, a nice feature.
What we also implemented is that we can add event tracking.
So maybe I want to have an event when someone submits this form.
This would, of course, be pretty easy to do directly through the Tag Manager.
But for some people, it might be a bit tricky to do so.
So by just checking this one, I get a pre-filled options to add an event category, action,
description, and name and value.
So it would basically just send an event when this happens.
I don't want this in this case.
So that's this demo.
And I think that pretty much sums up.
We also have, if you go back to the user feedback interface, because this can be pretty sensitive,
this data.
So we have the submissions here.
What you see was just want to delete a feedback.
So this page actually displays the collected feedback.
And I can go in and just delete a single record like this.
And here, we can actually filter out.
This is actually collecting all the feedback, so I can filter out in different ways and
even search for, like, rate this page equals 3, as we have here.
This is just for deleting data, so I can do that easily.
Yes, great.
To get feedback that you can help me with the segmentation, that sounds super awesome.
Thank you for this, Stefan.
I will definitely contact you about that.
What else?
One important thing is, of course, that since we are collecting sensitive data, we add permissions
to the feedback module.
So just to be able to see these reports, you can, on a user level, let's see.
So if I want to give this user some permissions on a particular website, I can actually add
the capability of being a form manager, a form user, and a template manager.
So template manager is, of course, adding a template to the site.
Form manager is, of course, creating the form.
And then the form user for actually viewing the data on a particular site.
So with both of these things as well.
And of course, tag manager capabilities, if you're going to publish something to the site,
you need to have that.
But that comes from that plugin, of course.
All right.
So that's actually what I was supposed to demo here.
Let's look at the next thing.
So we're actually building this as a premium plugin.
So right now, the pricing is 300 euros per month.
And we plan to release this on the marketplace, but we need to do some code evaluation.
If you're a client to Digitalist buying our sauce, the pricing may go down a thousand
euros.
But yeah.
So the roadmap right now is to release it in Q4.
What we're doing right now is actually refactoring it a bit.
So we're actually skipping the parts I displayed with the form template.
So we'll actually demo what we're working on right now pretty soon.
But the release is about creating forms, displaying form, data collection, and simple reporting.
We plan to continuously release new versions.
So as a client, you will probably get updates every month or so based on feedback from our
users.
As part next summer, I think we'll release the first widgets to get more graphical bells
and whistles, so to speak.
And then of course, it's an ongoing thing.
So based on feedback, we'll continue to release more nice things.
So let's look at the new form creation tool I'm playing around with.
So instead of having the templates, the plan is to make it look like this, just to have
forms and the ability to create form.
So instead of having this really techy JSON file, we plan to do it as this.
So just adding, dragging, and dropping fields to your form like this, and being able to
drag them around.
Let's add the header again.
So being able to do it in a much nicer way, as you see, it's pretty nice to do this.
We're actually using an external library to do this, but it gives us really nice ways
for users to understand it.
So after publishing this, I will go to the Tag Manager and just display it on the side.
So let's look at some questions.
I think this is about it for now.
Yes, we have Max writing from experience of working with similar tools in Google Analytics
and Google Timer.
I think the extra quality data adds an extra dimension when analyzing.
So great.
Thanks for this.
Yes, Stefan.
I think that would be awesome to have a workshop around combining this data with dimensions.
That's really, really, really nice, and thank you for reaching out there.
And Michael said that with event tracking, you should be able to filter out segments.
Yes, the problem is that the way we implemented the events right now is that there are actually
no connection to the actual user feedback sent in.
So that's something we would need to work on.
Yes, another question.
Can I use the form analytics to analyze how users are using forms, or can I get that data
from your plugin?
The only thing we have right now is the event tracking built in.
But you could use the form analytics plugin and probably listen to the user feedback forms
to get a more detailed analysis of the form usage there, which I think is nice.
But you can also set up manual events on, for instance, if someone starts to interact
with the form.
I have that as an idea to add that type of events as well, but I don't know how much
I want to build into the plugin directly.
But if you go to the plugin, go to the tag manager, and at this one, enable event tracking
of feedback forms, I could actually add a button saying enable event tracking for form
interaction and start collecting that as well.
Right now, we decided to just do this.
It's definitely possible to do it manually.
All right.
So, another question was, is it possible to use the feedback forms as segment or reports
for users that gave good, bad ratings or similar?
Yeah, we talked about that already.
Let's see.
I need feedback form after the 10th search result.
Is this possible to define a container in which the feedback form will be inserted?
I think that's really up to doing cool things with the tag manager.
And this is also why I really enjoy the tag manager.
One thing we didn't look into, which is pretty nice, is that maybe not asking the question
directly, but having this one in the tag manager by default is really, really nice.
We can actually decide how often this should be displayed to the visitors.
So, once per page view, once per 24-hour, or once in lifetime, or actually every time
someone sees the form.
So these type of great things with the tag manager.
But if you go back to the search results, so if you have a site and you want to display
this feedback after the 10th form result, I would use the one we looked into before,
the raw inline, that would make it possible to just inject the HTML of the form into your
search result list.
So I would say, yes, it's definitely possible, but you need to dig into how your search result
page, HTML looks like, but it would definitely be possible.
And the other things is like, okay, maybe you have, you can basically use any data on
the page.
So on the 10th page view, after submitting this form or whatever, you can come up with
any ideas of how to do this.
All right.
So we're actually running out of time.
Thank you for listening.
I hope you liked it, and feel free to continue to ask questions in this group.
I'll, yeah, I'll try to answer as much as possible.
Any thanks for your session, Thomas, of course, we can continue the conversation in the chat
for other questions that people might have.
Yep.
Sounds good.
Thank you, guys.
Thank you.