- In this video you're going to learn how
you can deploy a pop-up through Google tag manager
with the help of a tool called PadiAct.
All and more coming up, so let's start it.
(upbeat music)
Hi there, and welcome to another video
of measureschool.com where we teach you
the data driven way of digital marketing.
My name is Julian, and today we wanna talk about pop-ups,
or overlays, that you can display on your website.
These are fairly common nowadays but I got a viewer question
asking if those could be deployed via Google tag manager.
In fact these really consist just HTML, CSS, and JavaScript
and we can deploy such pop-ups through Google tag manager.
Notice, obviously, alters the appearance of the website
and I would urge you to consider the consequences when it
comes to deploying such codes through Google tag manager
because Google tag manager is not intended to be a content
management system, it's really a tool for deploying
marketing codes, and a better practice probably would be to
deploy this with the website content itself and incorporate
the HTML, CSS, JavaScript on the server side
rather than through a tag management solution
such as Google tag manager.
Nonetheless, this video is just a proof of concept
of showing you that it is possible to deploy such elements
on your page through Google tag manager.
In some cases it might be just viable to do it through
Google tag manager because such plugins really serve
the purpose of doing this kind of on-site marketing.
We can obviously build such a pop-up through HTML, CSS,
and JavaScript and deploy this all through
Google tag manager, we would need to have a little bit
of coding knowledge to do this, but there is much more to
pop-ups that we would need to take care of,
so I would highly recommend a tool called PadiAct,
which is not depended on your backing technologies
so it can be deployed on any website through
Google tag manager and it's able to take over all
the logic that is connected to such pop-ups.
If you wanna check that out, click the link below
and I will use this tool just because I don't want to
reinvent the wheel by writing my own code in order to get
all the functionality that PadiAct already gives us,
and even over delivers by giving us much more functionality
that might be necessary to deploy such a pop-up.
From here, now it's pretty simple, you just need to open up
an account and PadiAct will actually give you a
JavaScript code that you can install on your website.
This can be quite simply copied and
then transferred into your Google tag manager.
Let's build a new tag here.
We'll use this for on-site marketing and the tool is
PadiAct, and we'll deploy it on all pages.
This will be a custom HTML tag.
Let's paste it in.
Continue, and choose the all pages trigger.
Now we can go into our preview and debug mode,
and can simply deploy a new pop-up through PadiAct directly.
On PadiAct itself I have already made up a little
campaign for all purposes, you can see that here,
and now that we have our code installed we can go on this
preview button and see our little campaign.
On this side Google tag manager loads,
it deploys our PadiAct script and shows us our pop-up.
There are many different configurations that you can do,
first and for most are the rules that you can
choose to deploy this pop-up, and PadiAct does a really
great job of different rules that you can define such as
where the user came from, how often he has seen the pop-up,
how often you wanna see it maybe in the session,
if he is interactive with it or not, and of course also
the feature to target people who have an exit intent
and are about to leave the website, which will trigger
when the user tries to close the window.
There are very sophisticated rules in here that we could
model through Google tag manager as well but these are
already built into the system and very sophisticated,
so I would urge you to look through them and see how
you want to configure your display of your pop-up.
We can choose to send our data to many different providers
so PadiAct connects to any of the big email vendors
out there, in our case we're just gonna send it on to
PadiAct itself and then you can also choose the visual
presentation of your pop-up, if it should actually be a
pop-up or a bottom slide, a left or right slide,
that's something I would leave you to play around with.
The only customization I wanna show you here is the style,
unfortunately PadiAct doesn’t have many styles available
and the available styles are probably not gonna suit
your website, so I wanna show you a little trick.
You can actually custom design your
PadiAct pop-up which you simply need
to add some CSS rules to CSS on your page.
This could be done on the server side but since we are
working with Google tag manager we can actually take this
CSS here and paste it into our tag as well.
How would we do that?
We will actually go back to Google tag manager
and we can now add above the PadiAct script some style tags.
Be aware that since we're entering CSS here,
we wanna surround this with style tags.
You could copy the default here and play around with
the variables and if you note CSS you can easily
build this into the shape and form that you want to have.
I have something prepared already here,
which suits the style of our website
and if you go on, continue, and save this all.
Let's refresh our preview and debug mode,
and the important thing as well in PadiAct, we would
actually need to choose the naked style option here,
naked action and apply this to our website,
and now if you go into the preview of our campaign we see
our desired form of what we want our pop-up to look like.
Let's get rid of this quick preview bar, we can just publish
this as a version, and leave our preview and debug mode,
let's refresh this, and we see our pop-up and it's fullest.
If you put in an email address here,
you would be registered, we will also get a 'thank you'
message here that our coupon is on its way.
Another little trick I wanted to show you is how you can
leverage this 'thank you' message to send back data to
Google tag manager and potentially onto other tools.
For example, what if you wanted to send data back
to Google analytics or to retargeting tool that the user
actually converted and put in his email address with
the help of Google tag manager?
We can do this by appending an advanced form
of the PadiAct code tool our existing script.
This is all explained also in the hub section where you can
embed extra functionality to your PadiAct JavaScript code.
Let's copy this here
and head back to our Google tag manager code
and below our actual PadiAct script
we can now insert this piece of code and here we find
what we want to happen after the user has hit subscribe.
Since we're working with Google tag manager here
we can simply send in an event via the data layer.
Write a data layer function, which we can do with
a data layer push, I have something prepared here as well.
If we send an event, let's call this PadiAct subscribe,
and we can send another key value pair
such as the email address.
We have an example down here how we can pass
the email address here.
It should be without quotes.
This should push data into the
data layer when somebody subscribes.
Let's get rid of these examples here,
continue, and save our tag, and again let's try result.
Let's put in our email address.
Subscribe, and we see that our 'thank you' message
appears but at the same time down here we see now
our desired event, PadiAct subscribe event,
and in the data layer we would also see
the email address that was subscribed to.
You could use this PadiAct subscribe event for a trigger
to trigger any kind of tag that you might want to file
into a retargeting tool and to Google analytics
or your email marketing tool.
Just be aware that the email address should not
be used in conjunction with Google analytics
because it's against CTOS to send in any
personal identifiable information into Google analytics.
(upbeat music)
That's all with this week's video of measureschool.com.
If you enjoyed this video please subscribe
to this channel, and if you wanna check out PadiAct
please follow the link below.
My name Julian, till next time.
(upbeat music)