Are you looking for an easy way to set up a Facebook conversion API for your WordPress website? This post will cover everything you need to know about Facebook Conversion API. Then, we’ll follow step-by-step instructions on setting up the Facebook Conversion API for WordPress with the help of Stape’s GTM server side plugin. By the way, check out Stape’s pre-configured templates for Meta CAPI. Now it is easier than ever to configure your setup: everything is done and all ready for you!
We've been using the Facebook Pixel for years to see how our advertisements are performing and to generate great remarketing audiences. But, the Facebook Pixel's influence is waning owing to iOS 14 privacy enhancements and the impending demise of cookies next year.
To address this, Facebook launched the new and enhanced Facebook Conversions API. This technology has always been useful for marketers who want to track conversions correctly, but it is now crucial for Facebook advertisers who want to future-proof their strategy in a privacy-first environment.
CAPI uses server-side tracking, which sends data directly from your website's server to Facebook, bypassing limitations imposed by user privacy settings and browser restrictions, as it doesn’t rely on cookies. In addition, it can help you bypass ad-blockers, as the tracking requests are sent from your server-side rather than the user's browser. This can improve the performance of your ad campaigns.
Facebook Conversion API for WordPress provides additional data points that can help you optimize your campaigns, such as custom events like time on site, scroll depth, and form submissions. This allows you to better understand user behavior accordingly.
CAPI allows you to accurately attribute conversions to the right ad, even if the conversion occurs after the user has left your website. This is because the server-side tracking allows you to send data on the conversion event directly to Facebook, without relying on the user's browser to trigger the tracking request.
1. Go to https://tagmanager.google.com/ and log in to your Google Tag Manager account.
2. Click on the "Admin" button, and under the "Containers" column, click the "+ Create Container" button.
3. Choose a name for your server container, select "Server" as the type of container, and click the "Create" button.
4. Select the option to "Manually provision tagging server," and copy the container configuration that appears. Save this configuration in a text editor as you will need it later.
5. Log in to your account on our service or create a new account if you haven't already.
6. Once you're logged in, click on the "Create Container" button. Give your container a name, paste the Container Configuration that you copied from your Google Tag Manager Server Container, and select the server location. Click "Create Container."
7. Wait for around 5 minutes for the server container to deploy. Refresh the page to update the status. If the setup was done correctly, you should see the status "Running." If you see "Error," double-check that you've copied the correct container configuration. Contact support if the error persists.
8. In this step, you need to set up a tagging URL.
You have two options:
If you choose to go with the first option, move to step 9.
If you want to configure a custom tagging URL, click "Add domain" under stape provided tagging URL -> log in to your domain name service and create a new DNS record for the subdomain you want to use. You can use any subdomain name you want.
Add these settings:
Type: A
Name: ss (or any other subdomain name you want)
IPv4 address: IP address depends on the location of the servers. You can find the custom domain IP address in your stape.io account.
TTL: Auto
Proxy status: disable
Your settings should look like this:
9. You can enable the Global CDN feature for the server container, which uses Cloudflare technology to load js files from a server closer to your site visitors, resulting in faster js file serving and better page speed. Consider your country's privacy regulations before enabling this feature. Add a CNAME record to make Global CDN work.
Consider your country's privacy regulations before enabling Global CDN.
After you've enabled Global CDN you will need to add CNAME record to make Global CDN work.
10. Add the tagging server URL to the Google Tag Manager Server container by going to "Admin," then "Settings," and selecting "Container Settings.”
1. Log into your WordPress Admin, and go to the plugins. Then, click “Add New,” type “GTM Server-Side,” choose this plugin, and click install now. Once established, click Activate.
2. Open the GTM Server-Side plugin you installed in the first step and paste tagging URL inside the plugin settings. Next, select if you want to add web GTM to all site pages or just add plugin functionality without adding GTM script (this option should be used in case you are using any other plugin that inserts GTM script on the site). Next, add WEB Google Tag Manager ID, tagging server URL, and stape container identifier if you want to use a custom loader.
3. If you have an eCommerce website and want to push ecommerce events and user data to the Data Layer, click on the second tab of the plugin and enable two checkboxes. Note that it can work only with woocommerce shops.
1. Inside the Web container, create a new tag of the tag Type Google Tag. Add your Google Tag ID.
In the section Configuration settings add the following parameters:
Add trigger to GA4 tag. Normally it should trigger on all page views.
You can also create a Google tag: Configuration settings variable that will predefine Google Tag settings if you need to use multiple Google Tags on your website and do not want to add settings for each of the tags manually.
These parameters can be, for example, a setting that defines whether you want to send a page view event every time a Google Tag triggers, set UTM parameters, client ID, etc. There is a list of standard Google Tags configuration parameters.
2. To set up the GA4 event, go to the tags section and create a new tag with the tag type Google Analytics: GA4 Event. Add your GA4 ID and the event name; there is a list of standard event names.
You can create a Google Tag: Event Settings variable that will help to share event parameters across several GA4 event tags or Google Tags. It can be, for example, user or product properties, and there is also a list of standard parameters for event settings.
3. Open Google Tag Manager Server container -> click Client -> create GA4 client and save it -> go to Tags and set up GA4 tag. Remember that GA4 automatically sends not only pageview but some other events. Inside Event Name choose variable {{Event Name}}. -> add trigger Client Name equals GA4.
4. Open the Server container preview mode and check that you see GA4 requests. Publish updated inside server and web Google Tag Manager containers.
You have 2 options for configuring our Facebook conversion API tag:
In this case, we will map your GA4 events into Facebook standard events. If we can’t map the GA event into the standard FB event, we will record it as a custom event. Everything will be done automatically, you don’t need to set up FB events.
1. Create a new Tag in your server container. Go to the community template gallery and add Facebook Conversion API Tag. In the Tag select inherit from client. Fill in your FB API Access Token, FB Pixel ID, and Test ID to see events inside the FB testing tool.
2. Add a trigger. Click on triggers-> + in the top right corner-> trigger settings and select a custom trigger-> this trigger will fire on Some Events-> Client Name equals GA4. Click save.
In this case, you’ll need to set up FB events manually.
You’ll have to use GA4 events to trigger Facebook server events.
Let's take as an example an “add_to_cart” event and we want to send value, currency and item_id parameters.
1. Create a GA4 Event tag in your Web container or modify an existing one. Choose the GA4 configuration you just created as the "Configuration Tag" and set the Event Name to “add_to_cart”. And we want to send the event parameters: value, currency, item_id.
We take these parameters from the DataLayer, but since we don't pass all the data from the DataLayer, we want to make variables for these parameters.
In order to create these variables, we need to run a preview in the web container and open the data layer.
Let's create a variable for “value”.
Open the variables, make a new Data Layer Variable, in the Data Layer Variable Name write the path that we can see in our data layer for this parameter. In this case, it is ecommerce.value. Click save.
Repeat the process for the other parameters.
Let's go back to our GA4 tag and write down the parameters we want to pass when add_to_cart is triggered. Add a trigger. The trigger type is a custom event that is triggered on all custom events, the event name “add_to_cart”. Click save.
2. Create a new Facebook Conversion API tag in your server container. Go to the community template gallery and add Facebook Conversion API Tag. in this case we select override in Event Name Setup Method and the event type AddToCart. Fill in your FB API Access Token, FB Pixel ID, and Test ID to see events inside the FB testing tool.
Next, fill in the custom data that we decided to pass to Facebook. For these parameters, we will also need to make variables, but now in a server container with the type of variable “event data”.
We make a custom event trigger with the event name add_to_cart that triggers on client name equals GA4. Click save.
Open the web and server GTM containers debugger and click through your site. In the server GTM container, you should see requests claimed by Facebook conversion API Tag.
You can test this event inside the Facebook testing tool as well.
It is crucial to be up-to-date with modern technology and the digital age we are now living in, so it's a must for you to understand the tremendous help you can get from the Facebook conversion API technology. Using it for WordPress can lead to more accurate data tracking, faster load times, increased privacy compliance, and improved ad targeting.
So if you're ready to implement this amazing tool into your business strategy - don't hesitate to contact our support team for any help you might need on setting it up.
All it takes is a few simple steps. Click Try for Free , and configure your server Google tag Manager container with Stape in just 3 minutes.
