How to Capture & Store the Facebook Click ID for the Conversion API

Ensure that you understand the overall process of capturing and using the Facebook Click ID. First, we’ll get the “fbclid” parameter from the URL using ListenLayer. Second, we’ll store the value in the user’s browser (allowing it to persist as they browse the website). Next, we’ll retrieve the fbclid value from the cookie or local storage and push it back into the data layer during critical actions. Finally, we’ll capture the fbclid in a hidden field during a form submission.

Turn on the URL Parameters Listener so that the FBCLID will be parsed and pushed into the data layer automatically. Once it’s in the data layer, we can do anything we want with it inside ListenLayer.

Under Browser Storage Variables, create a new cookie or local storage key that you will use to save the fbclid. We cannot simply capture it from the URL and use it, rather we must store it in the browser so that it will persist across pages and sessions from the user.

In the following step we will write a rule to actually save the fbclid value into the browser based on a data layer rule.

We can now write a simple browser storage rule that focuses on the existence of FBCLID in your URL parameters (as they are parsed into the data layer). If this occurs, we are going to store the value into the Local Storage Key or Cookie that we created in the previous step.

After publishing your changes, we recommend testing to ensure that the FBCLID is actually being stored. Visit your website with the ?fbclid=12345 parameter on your URL. Then “Inspect Element,” navigate to Application and find your key.

We need to think about the critical actions when we want FBCLID to be captured with our other data. Now that we have the FBCLID in browser storage, as the user interacts with our website we can easily push it back into the data layer (it’s best to always centralize using the data layer! – it allows for consistency and monitoring). In this case we are going to push FBCLID back into the data layer every time a form loads or is submitted on our website. You can use chat, eCommerce, or other critical actions as well.

When our critical actions occur, we will simply push the FBCLID back into the data layer. Here you can see we have a custom data layer variable called user_fbclid (we created this inside of ListenLayer) and we are going to push the fbclid from the browser storage into this when our rules are met from the previous step.

Once the FBCLID is back in the data layer, we recommend capturing it with other data such as custom GA4 events. You can also move to the next step and see how to capture it via hidden fields into your CRM.

Create a hidden field on all of your forms – you will use it capture the fbclid. ListenLayer will push the Facebook Click ID into this field based on rules you create and manage in the platform.

Pro Tip: You can write a monitoring rule to identify any forms on your website that are missing the hidden field!

Create a unique CSS class for your hidden field. You don’t need to have actual styles for this class, the class is used to identify the field across forms, which is not always required. Some forms systems generate unique fields for each form, making it hard to globally identify a single hidden field unless we unify the with a common identifier.

Here we are putting the string “user_FBCLID” into the class field. In the next step we will write a rule to always push the FBCLID into any field with this class.

Inside of ListenLayer, we can create a rule to populate hidden fields on any form of our website. We’ll write the rule to push the fbclid from browser storage into the hidden field based on the css class we created in the previous step. ListenLayer will find any “input” element (field) that exists inside an HTML node containing this class.