Connect your Facebook Pixel with a GDPR Cookie Consent Notice
Articles,  Blog

Connect your Facebook Pixel with a GDPR Cookie Consent Notice

In this video, I’m going to show you how you
can connect your cookie consent form to your Facebook Pixel. So the data is not being sent if the user
has not yet agreed to your terms. All and more coming up. Hey there, welcome back to another video of teaching you the data-driven way of digital marketing. My name is Julian. And today we want to talk about how we can
connect your cookie consent form to the Facebook Pixel. Now, you may have installed a cookie consent
form because of GDPR purposes, where you ask the user to agree to your privacy policy and
the cookies that you’re about to set on his browser. Once he has given consent, you want to send
out data to third-party tools like the Facebook Ads tool or Google Analytics. We actually did a previous video on Google
Analytics and how to connect that with your cookie consent form. But today, we actually want to do this with
the Facebook Pixel. So what we’re trying to accomplish is to not
send any data to Facebook if the user has not yet agreed to our terms. And once he does, we send everything over. Luckily, Facebook just came out with another
command in the library that lets us prevent the data from being sent. And cues that actually up before the user
has then given consent. Once he has given consent, we can then programmatically
send a data all out to Facebook Ads, or Facebook analytics. Now to implement this, we need to alter our
tracking codes. And of course, I do this with Google Tag Manager. Now we’ve got lots to cover so let’s dive in. All right, back in our demo shop here, we
have already a cookie consent form that pops up right here. I’ve just installed this cookie consent form
for insights. This is free. I’m not here to say this is the best. And it might be not applicable for your case. But just for demo sake, it was really easily
installed via Google Tag Manager. I just built in a custom HTML tag where I
pasted my code. Now, this cookie consent form has two buttons
Allow Cookies and Decline. And if we click on allow cookies, it won’t
appear anymore on any other site. And what it does in the background is actually
set a cookie. So how can we see that cookie? If we go over to our developer tools under
more. And then we have here our developer tools,
you can see under the application section down here, we can see our cookies that are
set on this website. And we have our cookie consent status Allow. So this was set to the allow stage. If I delete this and reload the page, obviously,
the cookie consent will reappear. And if I click decline, it will set a cookie that sets the cookie
consent status to Deny. And again, it won’t reappear on any other
consecutive page load. So now, how can we connect this to our Facebook
Pixel? I have a Facebook Pixel is firing on every
page. It’s our standard Facebook Pixel that I’ve
deployed through Google Tag Manager on this page by a custom HTML tag. And we need to have a method to tell Facebook
to not upload his pixel at all. And recently, they introduced a new method,
which you can find on this page here. I’m going link that up down below that gives
us the commands of consent for revoke and grant. What this does is if we take this revoke flag
and put it into our code beneath the init function, we can revoke consent by default. So let’s try this out, refresh, and reload our page. And we see our Facebook Pixel fires. But inside of our Facebook Pixel helper, we
get an error that something wasn’t right here. The page view was not sent over to Facebook. Now if we deploy our grant command. And we can easily do this by going into our
developer tools. Here again, under more developer tools, we
have our JavaScript console. And here, you can enter the code here. That is the grant command. So let’s copy that and just enter this year, press Enter. And now we should see inside of Facebook Pixel
helper, we have page view data now sent over, although it was blocked beforehand. Now these commands, we now want to connect
with our cookie consent form. We have already seen inside of our application
here that a cookie is set with the cookie consent status, deny or allow. This is something we can use in Google Tag
Manager to programmatically switch our commands. So the Facebook Pixel grants or denies the
sending of the information. So the first step would be to actually pull
out this deny value from this cookie. How can we do that? In Google Tag Manager, there is a built-in
variable that we can use. So let’s go to the user-defined variables
here and click on the type of the first party cookie. We just need to enter the cookie name. In our case, that would be cookie consent
status and will enter that here. I’m going give this a name, a cookie, and then the cookie consent status. Let’s save this and try this out. Refresh, refresh our page. And if you click on an event, and then on
variables, you should see our cookie consent status should have a value of whatever’s in
the cookie. So right now, it’s denied. Let’s again, go into our application here
in the developer tools, I’m going to get rid of this. Reload. And this time, I’m going to click on allow
cookies. So right now, and nothing is in the variables
because we don’t have a new event. But if you reload our page right here, you should see that our cookie consent status
is now set to allow. Now how can we transfer that into these commands
of consent grant and revoke? But really, it’s just a different wording. We have revoked, which would be denied. And we have grant which would be Allow. So we just need to rewrite them really the
values that we have in the cookie to revoke our grant. How can we do that really easily with Google
Tag Manager? It’s possible by a lookup table variable. So just go into the variables here. And under lookup table variable, we can choose
the lookup table variable right here. And what lookup table variable does? It looks at a certain input variable. So in our case, we want to look at the cookie
status. And then we can make up what this should be
matched to. So in our case, for the input, we want to
match allow to grant and we want to match deny to revoke. Now, we can also set a default value down
here. So if nothing of this matches what should
be the value of our newly created variable, in our case, it should be revoked, because
this is the default state that we want to have our Facebook Pixel if the user hasn’t
yet replied to our cookie consent form. Now, let’s give this all a name. And again, try this out will refresh and reload our page. Now, as you have seen at the moment, we have our
cookie consent status to allow and it was rewritten from our lookup table cookie consent
to the Grant command. Let’s open up our developer tools and get
rid of our cookie, reload our page. And now our cookies shouldn’t hold any value. That’s correct, it’s undefined. But our lookup table variable goes to the
default value of revoke. And obviously, if I click on decline here,
reload the page, our variable of cookie also has denied that
should be transferred into revoke. So now we can use that look up cookie consent
variable inside of our Facebook Pixel. Let’s go over to our tag, to our Facebook Pixel, and simply replace
this revoke command here with our dynamic variable, which are two curly brackets, this
menu will open up and we’ll choose our lookup cookie consent. So now, this will be automatically filled
in depending on the state of the cookie. Let’s try this out, let’s save this and refresh, reload our page. And we can see our Facebook Pixel helper tells
us that our page view was not deployed since our variables here are still on the revoke stage. So let’s get rid of the cookie again, open
up the developer tools. And I’m going to go to applications and under
the cookies going to get rid of this one. And reload the page. And here we get our cookie consent form. At this stage, our variable is still undefined. And therefore we are on the revoke stage. But now I’m going to click on the allow cookies. And we would need to go to the next page view
in order for it to actually show up. Now, we should be on the second stage where
we allow our cookies and therefore the page view was fired. So this is already it. This is how you can connect your cookie consent
form to the Facebook Pixel and programmatically tell to send data or hold it back until this
grant command has been executed. Now, you might see a slight downside with
this method that we just showed you, which is if the user has not yet allowed the cookies,
let’s simulate us really quickly by going again, into all applications. And deleting this cookie, the page view right here, if I click on allow
cookies, although I allowed them only the next page views would actually be
triggered and sent over to Facebook. So if you wanted to get also this page view
and deploy right when somebody gives consent, then you would need to actually build in a
click trigger. We could do this by going into our triggers
here. And let’s build a click trigger. For now, this will be a generic one. So we’ll just go with all elements here. And the next step would be to go to our variables
here and configure our building variables. Because we want to activate our click variables
right here. You only have to do this once. And then we’ll refresh our preview and debug
mode. Go back to our page. Now I need to get rid of the cookies. So I’m going to open up the developer tools
again, under application we have our cookies here. And I’m going to get rid of this consent status
cookie so I can see our cookie consent again, here we go. And if I now click on allow cookies, I should
see the GTM click right here. And the GTM click will be filled with our
variables. So we can look at our variables and see how
they distinguish each other so we can find something unique. We see that the click text and click classes
got filled, I would go with the click classes here. So cc allow, it’s actually a good sign. I’m going to copy this and go over to Google
Tag Manager and turn my trigger our click trigger here into a specific one that fires
on the cookie consent allow. For that, we go back into the configurations
and only fire this on some clicks where the click classes this is correct contains cc
allow. Let’s save this. And now we need to attach this trigger to
a tag. Now, what tag should that be? Well, simply we want to deploy our allow command,
which is the line right here. So let’s build a new tag for this custom HTML
tag surrounded by script tags. And our consent here, we rename this and attach our trigger. Let’s refresh and go back to our page. Reload that. Again, now we need to flush our cookies. So let’s go back into the developer tools
applications and get rid of this cookie. It really reloads. All right. And if now click on the Facebook Pixel is
not sending the page view but when I click on allow, we should have our cc allow being
deployed and our Facebook Pixel firing correctly and sending our page views over. Now, if you have any other events that come
before that they will also be halted and then deploy it afterward once the grant command
has been deployed. We wouldn’t have to do this for the disallow
click as the default is that the consent is revoked. But now this that this is saved in the cookie
anyways if you go to any new page and new page view was generated that will be sent
over to Facebook. So this is how you can connect your Facebook
Pixel with a cookie consent form. All right, so there you have it. This is how you can connect your cookie consent
form to the Facebook Pixel. Now notice we haven’t used a negative trigger
or not fired our Facebook Pixel, we actually used the internal commands of the Facebook
Pixel to prevent the data from being sent. And then allow it if the user has given consent. This is the method that you should use because
it’s actually built-in to the tool. And Facebook takes responsibility for this
command. So it’s much easier to set up and we don’t
need to have any kind of tracking on our side to actually prevent that data from being sent
or not. And this is definitely something positive
that GDPR has brought along. The tool vendors are adapting, giving us these
commands to actually implement this data. Now, I’d love to hear from you. Is that something that you will use on your
page? Do you have any more questions? Please leave us a comment down below. And as always subscribe to this channel right
over there. Because we’ll bring you new videos just like
this one every week. Now, my name is Julian. Till next time.


  • Резван Абдунов

    Thanks for the video. I constantly watch your channel. tell me where to get such music as you do in the night of each video?

  • Kopranix

    Hi Julian, thanks for this great content, once again !!
    Do you know how to set this up with the GTM and the Adwords remarketing Tag, so that if the visitor denies the cookie consent it blocks the remarketing Tag of the Adwords Tag?
    Have you done a video on that?

  • jeal al

    Thank you for all your wonderful videos. They're very helpful.

    I noticed in your last video, your cookie consent form did not include an opt-out option for the user.

    If I set up it up the way you did in the last video, will the method described work with my cookie policy (whereby there is no decline button, but instead it waits for consent before sending the user's data to the tool) or do I need to add a decline option to the cookie consent form? Thank you again!

  • Russell Zimmerman

    Hi Julian – is it possible to set this up at the same time as Google Analytics so they both don't fire by default? I know you have a separate video tutorial for that, but do they overlap at all?

Leave a Reply

Your email address will not be published. Required fields are marked *