🔴 How to use the Facebook Conversion API with Google Tag Manager Server-Side

how do you send data from your google tag manager to facebook's conversion api in this video we're gonna find out all the more coming up hey there measure geeks julian here back with another video for you today and we are actually live so there are a few people um joining us already and they have the privilege of getting their questions answered so if you want to be on live if you see this on the replay then definitely hit that subscribe button because you'll get notified once we go live again in the next run so today we want to talk about how we can send data from google tag manager to facebook's new endpoint the facebook conversion api and yeah let's just get started with a little example here so here in my facebook no my google tag manager server side container and you might already know that you can install a something called the facebook pixel onto your website i have done the cs through google tag manager and this is now installed on my website here and it's sending then data to facebook's ads system and we have a page view here now facebook has come up with a new way to send actually data into the system and this is the con facebook conversion api so if you click here on manage integration this is my what's it called the data source manager the events manager so inside of the events manager go to manage integrations and here we have this new conversion api that we can set up so we have already set up a browser pixel on our website now we can set up this conversion api so what is this conversion api all about well the conversion api is an authenticated endpoint that you can send data into like the facebook pixel but the big difference is that you actually use it when you send data server-side so from a another computer that is presumably on the web you send data into facebook's ad system which has become quite important because all of the things that we are doing in the browser like installing our facebook pixel have become under scrutiny because of privacy regulations um browser protections but then also the updates that have been done on the ios side and facebook now opened up this new way to send data in which can be can be more reliable doesn't have to be necessary but it can be more reliable why because you're sending data actually from a computer that is in the cloud or in the internet to your to your facebook's ads account and not from the user's browser when we install a facebook pixel on our website we are essentially installing a way to for the browser when the user loads the page to send data off to our facebook ad system and this is under scrutiny so now we have a new way to actually send it directly from our server what is the server for example well if you're running an ecommerce store you might be running shopify or woocommerce if you're running a blog you might be running wordpress or you can choose any of the other content management systems out there these are installed normally on servers and they create your website in essence right so when somebody types something into a url bar they actually request from your server the html page and gets downloaded to the page the page gets downloaded to your browser and the browser then sends out that information to facebook now what we are trying to achieve is actually to take our server where our cms is installed so wordpress shopify or any other cms out there to send data from there directly to facebook's ads system and this is done via the conversion api so that's why it actually exists now the question is how can i send data from google tag manager which is installed on my website to the facebook conversion api well that's actually not the intended way to doing things there are workarounds to actually doing it but what you need to remember is that google tag manager is a client-side software that gets downloaded it's a container it gets downloaded to the user's browser now facebook wants you to send data server-side so you would actually need to have another computer that sends data to the conversion api luckily the gtm team has been hard at work as a new version of google tag manager which is called google tag manager server side so this is made for server side tagging and this is a server or a machine that you can set up in google cloud's platform or any kind of other hosting service that actually supports this and you can install google tag manager server side on that machine and then google tag manager runs on that machine and it's specifically made for that to send in data to a authenticated endpoint or to any kind of other endpoint you can also send data to google analytics for for example directly from that google tag manager server side instance now we need to set this up i want to show you how i have done this so you might see the callers already right here i have something called gtmc which is google tag manager client this is actually running on my website so it's installed on my website i have also something in in red here called google tag manager server side i'm not going to go into how i actually set this up all um this is for another tutorial today i want to show you how we can pipe data from our website to google tag manager server side and from there to our facebook conversion api so first of all let's see how google tag manager server side works so it kind of looks the same like google tag manager client side with the big difference that there is something called clients here and this is a specific concept that um we'll discover in a second here so when we go over and into the preview mode well it's not going to open up our website it's actually going to open up a preview mode on our tagging server so i have a custom domain here called track2.measure.school so this is the url that i actually can send now my tracking requests to this is the server on the internet i can just um show you how i can open this up as well this didn't work the copying let me see so i'm just going to go here it gives me an error 400 error because i don't have any requests sending back but then inside of my instance here you should have a request that's not true let me see yeah now we get a request here so here we have a request that i just sent in and this is data it doesn't hold any information but i just requested this url from another server just like a website that you might know and here i have an incoming request nothing is actually done because what we need to configure now is something called a client now client claims a request that comes in and with this claimed request you can then send out tags which we don't have just yet so let's first look in to the client here we can create a client there are not many clients out there by default google analytics for universal analytics uh google tag manager and so on what we will use in our example is google analytics for actually this is the client that can claim google analytics for requests so if we send specific requests into google analytics into our server side instance from google analytics four google anal this client can actually read it so i'm just going to call this ga4 this is our gfo client i'm going to save this okay now you might be asking yourself okay how do i send now data into the server side instance from my actual website well you still need to have a web tag so tag management is not going away in that sense you are sending data from the web tag i'm already have a facebook pixel installed here but what my facebook what my google tag manager server side instance requires is actually a google analytics for it and this is the way to actually send this over because the facebook pixel can't quite do it yet so what we will do is actually create a new google analytics four configuration tag and this will be our google analytics for config tag for the page view and the measurement id we don't actually need to enter something here i don't know if they will yeah let's see what will happen we can now there is this new field called sent to server container and here i can enter a server container url so this is my url that i have for my server container because now i want to pipe all my google analytics for requests to this new endpoint right here let's see if i can just simply save this oh i need a trigger so i will add a trigger here which is all pages i need to have a measurement id um i think it starts with g just gonna do a fake one here and https yeah that should do it so let's see if this works i'm going to preview this and now i should be sending a google analytics 4 page view to my new instance so i'm not sending this to google analytics 4 it's actually not doesn't do anything in google analytics 4 it sends it to my server side instance which has now a new collect call here i don't know this one is not updated so here there is actually a hit a payload that is google analytics for and this is an incoming request now what we would need to do is to claim this request ah i didn't preview this correctly so you need to always click on preview again to reload this and let me send off this request again so here we have our request and this time we have a client that actually claims that request now the purpose of that client is to read all that information from the request and then it puts it into a data model so we will be able to use that information in our tags that we now want to send out and we don't have to send out a google analytics for tag actually we're going to send this to a to our facebook conversion api so what i'm going to do now is inside of our facebook business manager here under integration so again we have our facebook pixel id i have already um that that's that's where we want to send this this is also information well um let's first go ahead and see what information we need so inside of google tag manager we're going to go over to tags and here i'm going to click on new and ah okay maybe that's something i shouldn't explain so if if you don't see the facebook pixel template you need to go over to templates right here and then search the gallery under the tag templates and here you will find the facebook conversion api tag this is by facebook official so they have built this and it does some stuff in the background um to the request that is coming in so i've installed this template and then under my tags i will now be able to add a facebook conversion api tag now we can see what information they actually want they want the pixel id which we have so we have it right here they want to have the what else the api access token so that's something you can find i will go to manage integration and then go to manage right here and it will take us through the setup here and here we can generate an access token now this token is a like a password that you can use in order to send data and so now everybody can send it into your account just by knowing your pixel id which can actually pollute your information you can now have a password that nobody knows because it's actually stored on your server set instance and nobody else can read this unless they have access to your google tag manager account then we can set up the test event code now the test event code is for testing this all so what i will go and see let me see finish this here let's go over to uh no we we need to go here and test event and so here we have our test event code so this sometimes changes so you might need to refresh this from time to time we'll put this in here and now we have this tag already set up we can choose the action source so where do we want to where is this information sent from and we can say well our data comes from the website itself so we'll choose website here and then we can say which trigger we actually want to fire this on now it works a little bit different than inside of a web container we actually have a request that comes in which comes from google analytics four so what we can do is to say we want to trigger this on a custom event the event right now that we want to trigger this on is page view so in our case it would be page now let's go view and we can obviously filter this if we have any other filters so if you don't want google analytics for to fire this on certain page views for example you can filter this here and we're not going to do this right now let's just call this ga4 page view save this give this a name obviously facebook conversion api tag and let's save this so now we have a facebook conversion api tag and if i go to preview our container loads again and now if i send off this data my server set instance should get a new request so facebook conversion api uh request here's the request that came in google analytics for client claimed it and then it sent off a facebook conversion api a lot here to be honest is happening in the background and the data that we are sending over standardized via google analytics for tag is now parsed into what facebook conversion api tag needs and is then sent over with that data requested now inside of the events manager we see here that there is a new page view but it's coming from a browser so that is not correct let me see we have here our id the id is completely wrong so this is the id i guess i was on the different pixel we have our api access token i probably need to change this around as well and the other way to get the api access token is to go to settings here and then we have our conversion appear here we have our code and then we also need to have our test events code again so go with this one right here okay now it should be all updated let's preview this go back to the page reload this and once that's done we have a page view that sends a facebook conversion api request that sends it now to a server side uh server side through the server api conversion api to facebook so we see here that this is came through through server and it has the information that facebook would already need the url that it's coming from website the browser id the ip address and the user agent so what have we done here it's simply um we relayed or proxied the request not to send it to google analytics for or to facebook directly we are sending it first to the server side instance and then to google um facebook's conversion api so that is already in essence it but what you might see is that it says here duplicate it so when we send over this page view we have um well it says deduplicated but it's not really so what we send over here is because we still have our client tag installed on our google tag manager client-side instance so we have our facebook pixel sending data and this is still be can still be seen on the website by the um facebook pixel helper so this is actually still sending we're actually sending two pages now right we're sending one via the facebook pixel and then via the server side instance and that's why we also get two events here now this is actually the preferred way of facebook to send data in to have a parallel tracking so to say from your facebook pixel still and your server side instance because they want to get as much data as possible but because of all the pro browser protections not um always will you have two events coming through because maybe ad blocker will block this one but this one will come through so in order to tell facebook that these are actually the same page views you would need to utilize a event id this is the the column right here in order to tell them exactly these two page views came from the same source they are the same thing in google tag manager there's an easy way to actually install this so what you can do inside of tag manager here is to install a variable called event id so under variables and go over here and click on new and then variable configuration and here we have our community template gallery and if we type event id we have the one by marcus marcos bayes so i already tested it out it's a good [Music] with variable we'll just add this in doesn't quite do anything for us yet because we now need to configure it right here which is no real configuration i don't know sometimes just doesn't want to work so i'm going gonna go event id again and so now it loads it in no configurations required just gonna call this event id so we know that this is an event id and now we need to add this actually one to our facebook pixel that is installed on our client side and there is a special field in the facebook pixel template down here under more settings you have event id we can just slot in our variable and the second part is to use um to send this also to our server side instance and here we need to use a little trick um because this is a template for google analytics for there is no template for facebook yet that can actually where you can send this data to another url so we'll use field to set option and here we're going to put an event id and as the value as well our new event id so let's save that and preview this again and now we're sending a facebook pixel and we are also sending a server side instance this time we're sending the facebook pixel with the event id um let me see we have a container loaded pedro so here's an event id this is just a random number but this random number it's not random he has built in some thought into this but this number is exactly the same number that should also be inside of the google analytics for config tag right here so here we have this config tag that sends data to our server side instance and then inside of our server set instance we should obviously also be able to then pick this up via our request here and then pass this into our facebook conversion api so i don't know if you can actually see this um facebook not really let's see if the events manager picked this up correctly we have here an event id yeah it is sent correctly and then also in the browser instance we have a new with a facebook event id and this whole page view was now deduplicated because all of these have the same number now don't make the mistake to have the same number per page view you need to have a same number per event so if you would send or if we reload this page here this should actually be a different event id because this needs to be unique per event and not that you're sending over the same event id over and over again and that's also a mistake that i have seen seen before so now we have another request right here and this is actually a completely different id than this one right here i don't know if you can see this um and this is a unique event id so now we have sent over our facebook pixel and our google analytics for and deduplicated it this is very important if you send data directly from facebook pixel and from google analytics for at the same time in order to deduplicate this okay you can send obviously other events in like for example a transaction event or a button click or any other event that you want there is a bit special syntax to this so in the google analytics four tag you would need to have certain parameters that you add in and in your server set instance then they will be transported over to your google tag manager um or the facebook conversion api tag and then send on a lot of this heavy lifting is already done by the facebook conversion api tag template that is installed here so they can pass certain data but some data you need to be very wary of how you send that in and you can also send in personal information like the email address but this needs to be hashed and yeah there's a lot more that you can customize in order to sell send your full stack of your facebook pixel events over via the facebook conversion api we won't cover this today but it's a good exercise if you want to port everything over and i would recommend to go through the post by seymour hover who has written a great post on all the different configurations that you can make to these different tags so check that out at his blog some caveats as well what i didn't really talk about a google tag manager server side actually costs money so that's something you would need to budget for if you want to use server side tagging with google tag manager and yeah other than that i don't have anything uh left right now this is it with my little tutorial here i hope it um cleared up and got you started on how to think about server side tagging with server side google tag manager server side and how to utilize this with the conversion api obviously one thing i forgot to say is that you need to publish all of this if you want to take it live to your website um sometimes i get these questions of like oh my tracking isn't working i followed all your steps and yeah um i didn't quite say that you need to submit a version and then publish this all and i'll take this live on your website so um definitely do this as well cool all right this is already it with this little tutorial if you found this useful then i'd love for you a thumbs up and if you are interested in sending data via the convert to the conversion api via zpier we have a video right here that cedric did for us as well now my name is julian til next time

Channel: MeasureSchool

Views: 16,004

Rating: 4.8361444 out of 5

Keywords: third party cookies, future of tracking, cookieless tracking, digital marketing ITP, server side tracking, google machine learning, first party tracking, cookieless retargeting, end of tracking, how iOS updates affect digital marketing, digital marketing and iOS 15, Google third party cookie end, cookieless future, gdpr, opt out of marketing, allow all cookies, cookie banners, privacy concerns, ad targeting privacy concerns

Id: JNResY4jJZA

Length: 25min 31sec (1531 seconds)

Published: Wed Aug 04 2021