In this video, I'm going to show you how you can trigger an OptinMonster pop up with the
help of Google Tag Manager. All nd more coming up.
Julian here back with another video today we want to talk about OptinMonster and their
pop ups. Now we oftentimes use OptinMonster on our website itself, to drive people to
sign up for something or give them a download. When I first signed up to OptinMonster, I
really looked forward to using it in combination with Google Tag Manager. Well, you can install
OptinMonster through Google Tag Manager, but there wasn't actually a native way to trigger
these pop ups with the help of the trigger capabilities of Google Tag Manager. That's
why we had to come up with a little workaround. And now we can utilize all the goodness of
the data layer in combination with our triggers of Google Tag Manager to trigger great pop
ups of OptinMonster. Do you want to know how this works? Well, as you can see, we got lots
to cover. So let's dive in.
Today our journey starts inside of OptinMonster account. If you have an account and you're
probably familiar with the setup process already It's pretty easy. So we're just going to go
create a new campaign here, you can choose between the different campaign types, or just
go with the classic pop up, which is the easiest. And let's go with this donate template, give
this all a name and select on which page you want to show this on. So let's start building
this. And we have a nice countdown, some information and then a button itself. I'll leave it up
to you to play around with us and change around however you want. We're just going to go ahead
and talk about how we can implement this on our page. So the next step would be to choose
the display rules. So time on page at least five seconds and then you can choose an add
on different other rules. So we have here the current URL path has any page. So it will
be shown after five seconds on any page. Again, you can change this around to your heart's
content. We'll go ahead and click on integrations. It's not something we really need to care
about. If you have any opt in fields, you would integrate them with our CRM, the analytics,
I'm also going to take leave untouched. But now we come to the publishing itself. And
we're just ignore these options right here. I want to talk about the platforms right here.
So normally, you can deploy OptinMonster via the rule set that we put into the display
rules and implementing it on any website, or through a monster link. That's a special
condition as well. Or if you just want to have this specific campaign displayed with
a specific code, you could use the campaign embed option, which will give you a code that
is specific for that campaign.
Now, I would argue that you actually should take the any website code right here and copy
it. And then go over to your Google Tag Manager account and implement this as a general tag
for your OptinMonster. So we'll go ahead, click on tags, and OptinMonster pop up on
all pages. So this is the general code that we're going to deploy. We'll go with the custom
HTML tag and paste our code in here. You will need to check the option support document
right because this JavaScript code actually will implement the pop up via this functionality
of JavaScript. So be sure to take that on. And then you choose as the trigger all pages,
so it will be deployed on all the pages. So let's save this and go into a preview and
debug mode. Then on our page where we have Google Tag Manager already installed, well,
it doesn't show it. But here we have Google Tag Manager installed our OptinMonster pop
up now is automatically deployed. Now, our campaign is not yet live. But let's go ahead
and click that on live. Save this all, go back to our page and reload that. And after
five seconds, we see here that our pop up appeared. And we can interact with it now.
This goes actually to OptinMonster. Let's so let's go back. And this is really the way
of implementing OptinMonster through Google Tag Manager. If you simply want to utilize
the display rules that are available within the tool, there's some really cool ones, such
as time on page, obviously the page targeting if the user is about to exit the page, and
if you upgrade to certain versions, you will be also able to do location or returning visitors.
But what if you are actually well versed in Google Tag Manager and you know the different
trigger types that are available. And you know that you could build these rules either
easily yourself or you want to utilize the capabilities of Google Tag Manager, such as
YouTube video tracking, in order to show your pop up at a certain time. So that's when you
need to change your deployment slightly. So what do I mean by that?
Well, let's go ahead with a little example here and actually use our YouTube video trigger
to fire our tag and deploy our pop up, show our pop up to our users. So I'm just going
to click on this right here and we can configure it on our page itself. We have a video page
right here, we have a YouTube video embedded. And this is what we want to track. Let's say
if somebody starts the video and watches more than 50% of the video, we want to then show
our little pop up. So in order to make this work, we need to configure first of all our
YouTube trigger, say our YouTube trigger. And we'll just keep it very general right
now. We want to capture the start and complete it and the pause phase or seeking phase. And
then also the progress and progress that I want to know about is specifically, when somebody
reaches 50%. I want to add our JavaScript API support. The plot is on Dom ready. And
yep, that should do it. Let's save this. Actually, what you also need to have enabled are some
of the variables right here so we can see the video percentage, I have it already. So
you need to have this enabled. And now we can just try out the listener functionality
of this trigger. So we can reload our page here or listener should start listening on
DOM ready right here. And if you start the video, we should see something. Yes, there's
a YouTube video event and we are video percent of Zero. Let's go ahead and go further. And
here we are at 52%. And that's when we already want to fire our tag. So now we can refine
our trigger bit. Go back to Google Tag Manager, and change our YouTube trigger into above
50%. And let's go ahead and put in some conditions here. So only on some videos where the video
present is greater than 50. We want to deploy our tech. So the trigger is now defined correctly.
Now, what do we put in here in order to show our tag. You know now that there are display
rules that we have defined inside of OptinMonster. If you want to utilize the display rules right
here, you can do so and you just need to have our general tag installed. But since we want
to utilize the triggers inside of Google Tag Manager, we actually need to get rid of these
conditions altogether. And only choose one condition, which is the monster link condition.
Okay, we can now save this and go to our publish section. And here, we still go with our any
website tag. But what we would need is the campaign to be more specific campaign ID in
order to tell OptinMonster which campaign to deploy. And we can find the ID actually
here inside of the URL, you could also go into monster Shareable Monster link. Here
is again or in the campaign and then it is again. So you need to have that ID. And then
inside of Tag Manager, we leave our general tag here untouched. It's like the library
that loads in the Facebook pixel and simply attach a new custom HTML tag, go over to new
and embed a little bit of code which I have already prepared.
And this code will then deploy our pop up. So what we need to change here is definitely
the campaign ID. So again, this is up and the URL of your campaign builder. And down
here as well, we need to just simply replace this. Now what will this go to first of all,
it will deploy or append a div element to our page. And this div element has an attribute
so we know how to target it. Now this div element will also act as kind of a button
or something that you need to click in order to show the pop up. OptinMonster calls these
monster links. But really, it's just a div that isn't really visible because we have
to put this to display none. Now in the background, then we take a little bit of JavaScript search
for this element, and then click it. So it's a virtual click via JavaScript really, we
implement the div click it and that then triggers the right pop up. So let's try this all out,
we give this a name OptinMonster pop up for our video viewed.And let's attach our trigger.
And now again, this pop up, or this general code, we could just call a general code right
here is just a library that gets the product doesn't do anything on your page itself. Unless
you give it a command of this second pop up here that the video was viewed and the button
is clicked and then that will show your pop up. So let's go ahead and preview this. And
on our video page, let's reload that.
We don't have any pop up right here, but once we start playing the video is still at zero
percent here. And here we are. So that 37 let's go ahead and go to 50. And you can see
our pop up just fired because our tag was actually deployed. I don't know why it doesn't
show it. Yeah, it shows it here. So the video was deployed. And we see our pop up from OptinMonster.
And you can obviously do this with any kind of other trigger. So the click trigger, the
element visibility trigger, the scroll trigger, and so on. You can utilize any kind of triggers
that you want with this little syntax in combination of the embedding of this node, and then clicking
off that node. And then that will deploy and show your pop up or your banner that you have
defined by OptinMonster. So this is a method to deploy many different OptinMonster banners
or pop ups on your page and triggering them individually via Google Tag Manager. You could
also do this if you have the right data layer information in there and only fire to certain
people, for example. So you can be very specific with the targeting via Google Tag Manager
and simply use OptinMonster as a way to build these kind of pop ups, but deploy them through
GTM.
Alright, so there you have it. This is how you can trigger OptinMonster banners with
the help of Google Tag Manager. I'd love to hear from you what you will utilize this for,
leave me a comment down below and so we can learn from each other. And if you haven't
yet, which I can't really imagine because I mentioned it multiple times already. You
should click that button over there to subscribe to the channel so you stay up to date with
what we do here. Now as always, my name is Julian til next time