Meta Signals Gateway Tutorial – Set Up Server-Side Tracking with Usercentrics

Key Takeaways

Hey there, I'm Benjamin from Lovesdata. In this video, I'm going to show you how to set up Meta Signals Gateway using Usercentrics. We'll cover what Meta Signals Gateway is, how it can help improve your advertising, and I'll walk you through the steps to get up and running. By the end of this video, you'll be using server-side tracking to help reduce your cost per action and improve the quality of data being sent to Meta. Before we get started, I want to give a shout-out to Usercentrics for sponsoring this video. Usercentrics offers a managed hosting solution for Meta Signals Gateway that makes it easy to get started without needing to set up or manage your own servers. I've included a link to Usercentrics in the description below this video. Okay, let's start by taking a quick look at Meta's page covering Signals Gateway. Signals Gateway is Meta's solution for connecting first-party data from your website, apps, and other sources to Meta and other platforms. It includes a first-party pixel called the Signals Gateway pixel, which is served from your own domain instead of Meta's. This means it provides more reliable tracking and reduces the impact of ad blockers and browser restrictions. Meta has said that advertisers using Signals Gateway see improvement in their conversion tracking and a decrease in cost per acquisition. And the good news is that Usercentrics makes it easier to set up Signals Gateway. Instead of having to configure and manage your own server, Usercentrics provides a solution that's managed and hosted for you. And it also allows you to integrate with their consent management, so you're only sending consented data to Meta. Okay, now let's head to Usercentrics. We're looking at the Usercentrics Meta Signals Gateway page. I've included a link to this page in the description below this video. To begin, you'll need a Usercentrics account. If you don't have an account yet, you can click start free to create one. Or if you already have a Usercentrics account, you can log in to your account. Since I already have an account, I'm going to click login and I'm going to select server-side tagging. Now, I enter my email address. Click continue. Enter my password. And click continue. We're now looking at the overview for server-side tracking. We're going to select Meta Signals Gateway, but before we do, I want to mention Usercentrics also offers a managed solution for Google Tag Manager server-side containers. This is also a great way to improve the accuracy of your data if you're using Tag Manager. If you'd like to learn more, I've included a link in the description below this video. Okay, now let's click go to Signals Gateway under Meta Signals Gateway on the left. And let's click the button to create a new gateway. First, we need to name our gateway. I suggest using a short, descriptive name like the name of your business or your website. I'm going to name my gateway Lovesdata. Then we need to select the server location for our gateway hosting. Currently, there is just one option, which is EU Central, so we can leave this selected. Then we need to agree to the terms and conditions, privacy policy, and data processing agreement. Now, let's click create gateway. We've now created our Signals Gateway. If it's the first gateway you've set up, you will receive an email to activate your account. If this applies to you, take a moment to check your email, including your junk folder, to activate your account. This step is a bit confusing, but basically, you'll need to create a separate password to access the gateway server. And this is different to the login you used to access your Usercentrics account. Let's take a look at the activation email. I've already opened the email from Usercentrics, so let's click activate account. The Signals Gateway hub opens. This is the URL for our gateway server. Now, we need to create a password. And let's click the button to access our Signals Gateway hub. We're now prompted to set up a pipeline. A pipeline is the connection between your data sources and your destinations. So, for our setup, the pipeline will connect the Signals Gateway pixel on our website to Meta. To create our first pipeline, let's click get started. We're now prompted to select the type of pipeline we want to create. We can choose Signals Gateway pipeline, which lets us create a new pipeline using the Signals Gateway pixel. Or we can choose Conversions API Gateway pipeline, which is for connecting existing Meta pixels with the Conversions API Gateway. Let's ensure Signals Gateway pipeline is selected, and let's click create. Now, we need to name our pipeline. I recommend using a similar name to the one used for your gateway, so I'm going to name mine Lovesdata pipeline. Next, we need to select our data source and destination. Let's select Signals Gateway pixel as the data source and Meta as the destination. Now, let's click continue. Next, we need to name our Signals Gateway pixel. I'm going to name mine Lovesdata pixel. Then we need to select if we're already using the Meta pixel on our website or not. Since I already have the Meta pixel installed on my website, I'm going to ensure yes is selected. Now, let's click continue. Next, we need to authenticate with our Meta business account. Let's leave the default option selected and click the connect button. We need to authorize access and click the button to continue. You'll need to log in to your Meta account and authorize access. We'll then be taken back to our Signals Gateway hub. I'm going to ensure the business portfolio I want to use is selected, and I'm going to click continue. Now, we select the data set we want to use. And click continue. We're now given the Meta pixel code to add to our website. Instead of using this pixel code directly, we're going to use Meta's tag template in Google Tag Manager to install the pixel. But we need to complete this step to continue, so let's click copy code. And now, let's click continue. We've now set up our Meta Signals Gateway pixel, so let's click done. We can now see our new pipeline. On the left is our data source, which is the Signals Gateway pixel, and on the right is our data destination, which is our Meta data set. Before we install the pixel on our website, let's set up a custom domain for our gateway. Using a custom domain means that data is sent through your website's domain rather than a third-party domain. This improves the accuracy of our data and helps cookies last longer, which means better attribution for your campaigns. To set up a custom domain, let's click account settings and choose data routing. Now, let's click optimize. To send data using our own domain, we need to configure a subdomain on our website. To do this, we need to add a CNAME record to our domain. I'm going to show you the steps to do this with Cloudflare, but if you're using a different platform for your domain's DNS, you'll need to check their documentation to find the steps to add a CNAME record. Okay, so first, we need to choose a subdomain. You'll need to ensure that you're not already using the subdomain on your website. For my subdomain, I'm going to enter SGW. Next, we enter our website's top-level domain. I'm going to enter lovesdata-test.com. And we need to copy the Signals Gateway domain at the bottom. Now we need to create the CNAME record. So let's head to Cloudflare. I've already logged into Cloudflare and we're looking at the DNS records for my domain. So let's click add record. Let's CNAME as the type. Then for the name, we enter the subdomain we entered previously. So for my record, I'm going to enter SGW. Then for the target, we need to paste the gateway domain we just copied. Let's disable the proxy. And let's click save. We've now created the CNAME record. So let's head back to our Signals Gateway Hub. And let's click continue. Our custom domain has now been set up and verified. Now it's time to install the Signals Gateway pixel on our website. This is separate from your existing Meta pixel. You will need both running on your website for the best results. As I mentioned, we're going to use Meta's tag template to add the pixel. To get the details we need to configure this, let's select data sources under data pipelines. And let's click the name of our pixel. Now let's select the setup guide tab. And let's select the drop-down at the top and choose Google Tag Manager. Now we need to copy our Signals Gateway pixel ID, our pixel host, and our pixel script. We'll need these in a moment. I also want to mention that if these exact values aren't used to configure your tag, your implementation won't work. So if you run into any issues, you should check that these are all correct in your tag. Okay, now let's head to Google Tag Manager. And let's navigate to templates. We can see the Meta pixel template has already been added. This is for the base code. Now let's click search gallery on the top right corner. And let's search for Signals Gateway, all one word without a space. And let's select the Signals Gateway pixel by Facebook Incubator. Now let's click add to workspace. And let's click add. Now we have to complete an important step. We need to add the URL for our Signals Gateway pixel script to the template. To do this, let's click the name of the template. We need to select the permissions tab and select inject scripts. Now we need to delete the placeholder URL and we need to paste the pixel script URL we copied earlier. Now let's click save and click continue. The template has been saved. So let's close this. And let's navigate to tags. Now we need to create a new tag. Let's name the tag Meta Signals Gateway pixel all pages. And let's select tag configuration. We can see the tag template we added for Signals Gateway. Let's select this. Next, we need to add our pixel ID, host, and script URL to the tag settings. I recommend creating variables for each of these so you can reuse them across all of the different events you're sending to Meta. However, to save time, I'm going to hardcode these into the tag. So let's paste the ID we copied earlier. And the host. And the script. If you already have the Meta pixel base code configured in your container, you will also need to define an event ID for the tag. This lets Meta deduplicate events when they're collected using the standard Meta pixel and the Signals Gateway pixel at the same time. Since I do have the standard Meta pixel in my container, I need to do this. So let's select more settings. And under event ID, let's enter two opening curly braces. Then select new variable. Let's name the variable event ID. And select variable configuration. Now let's select custom JavaScript as the type. And I'm going to paste some code. I've included a link to this JavaScript code in the description below this video so you can copy it from there. You could also use a variable template from the community template gallery if you prefer. Either way, this code creates a unique ID for each event on your website. So when both pixels fire at the same time, Meta can match them up and avoid counting the same event twice. Okay, now let's save the variable. Next, if you have a consent management platform configured like Cookiebot, you will also want to configure the consent settings for this tag. Since this tag sends data to Meta, you should ensure it only fires once consent has been granted. To do this, let's scroll down to advanced settings and look for consent settings. Let's select require additional consent for tag to fire. And let's click add required consent. Now let's select add_storage and click add required consent again. And select add_personalization and click add required consent one more time. And select add_user_data. We also need to add a trigger to the tag so it only fires after consent is granted. To do this, let's select triggering. And let's add the Cookiebot consent update trigger. If you haven't set up this trigger yet, I covered the steps in my tutorial on Cookiebot and consent mode. I've included a link to that video in the description below. Okay, now let's save the tag. Since I'm also using the Meta pixel base code, I also need to modify this tag to use the same event ID. So let's select the Meta pixel tag. Now let's select tag configuration and select more settings. And under event ID, let's enter two opening curly braces. And let's select the event ID variable we events are deduplicated in Meta. Now let's save the tag. Before we publish, let's preview our changes to make sure everything is working. Let's click preview. Tag Assistant loads. We need to enter the URL of our website. And click connect. Our website loads and we can see Tag Assistant has connected. Let's select the Tag Assistant tab. And we can see our Meta Signals Gateway pixel has fired. Okay, now let's close Tag Assistant. And let's close our website. Now let's head back to Google Tag Manager. And let's click submit to publish our changes. Let's name the version. And click publish. Our changes have now been published to our website. The Signals Gateway pixel is on our website and sending first-party data to Meta through the Usercentrics hosted gateway. It can take a little while for the first events to appear. Once events start flowing, you'll see them in the pipeline dashboard. This is where you can monitor the number of events being processed and check that everything is working correctly. Okay, now let's head to the Signals Gateway hub to check if events are being received. Again, it can take a while for events to come through. So, if you select the diagnostics tab, you might find an alert until events are detected. Once events are detected, you can select the event activity tab. This will show you a summary of all the events that have been collected by your gateway pixel. And if you don't see your events coming through, I recommend waiting around 30 minutes and checking again. There's usually a delay when you first set up Meta Signals Gateway. So, that's how you can set up Meta Signals Gateway using Usercentrics to improve data quality for your Meta advertising campaigns. If you run into any issues setting things up, then I recommend checking that you've completed each step we've covered. It's especially important to make sure you're using the correct tag in Google Tag Manager, and that your custom subdomain is configured correctly. If you'd like to learn more about Usercentrics, Meta Signals Gateway, or server-side tracking, I've included links to extra resources in the description below this video. And if you haven't already, please take a moment to subscribe to this channel for all of my latest tutorials. Thanks for watching, and I'll see you in the next video.