Facebook CAPI : the best way to integrate it (Meta Ads)

Need help APIs
1

Hi,

I wonder if you have any guidance to integrate Facebook CAPI on a Bubble app.

There are very few posts on the forum about it, and most are quite old.

There is this plugin: Facebook Conversions API Plugin Plugin | Bubble

But it’s also very limited in number of apps that have it, so it’s hard to get an idea.

We really want to make it server side, so not through Google Tag Manager, neither workarounds such as Zapier for example.

The first part of the integration doesn’t seem so hard, where we need guidance is exactly what needs to be done to feed the algorithm different events or data.

  • is this plugin really working all the way?
  • is it worth doing a custom API integration or this plugin really help?

Do you know any bubble apps that already went through it?

Thanks in advance,

2

Hey @GammaMat , this API Body worked for my Conversion API setup:

{
    "data": [
        {
            "event_name": "<event_name>",
            "event_time": "<current_timestamp>",
            "event_source_url": "<website_url>",
            "action_source": "website",
            "user_data": {
                "em": "<hashed_email>",
                "ph": "<hashed_phone>",
                "fbc": "<fbc>",
                "fbp": "<fbp>",
            },
        }
    ],
    "access_token": "<your_access_token>",
}

Hope it helps anyone

3

Thanks.
Yes, this is the “easy” part.
From what I understood (I’m not the dev of the team), the hard part, where we are still blocked, is to actually hash and send these hashed emails or fbclic id values, to be compliant with the way Meta expects them.

My dev:

" 1. fbc & fbp both require extracting some data from the Facebook cookies and then creating a timestamp in unix format from the moment the page loaded and storing this in a browser cookie and then joining a bunch of data together so it’s ready to use in the events. This is beyond my capability and not something I have the skills to achieve.
2. User agent - this also requires some custom javascript that’s beyond my capability
3. The IP address: again it requires quite some effort to construct in the format they are asking for as we need to cater for different IP address formats and conditions."

Did you manage to bypass these problems?
Interested in your feedback here.

5

Not sure if this will help. But I added the following code to in my Landing Page to extract fbp and fbc:

<script>
    // Helper function to get cookie value
    function getCookieValue(cookieName) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${cookieName}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }

    // Get fbp value from cookies
    const fbp = getCookieValue('_fbp');

    // Get fbclid from the URL
    const urlParams = new URLSearchParams(window.location.search);
    const fbclid = urlParams.get('fbclid');

    // Construct fbc value (consider storing fbclid timestamp for accuracy)
    const fbc = fbclid ? `fb.1.${Math.floor(Date.now() / 1000)}.${fbclid}` : null;

    // Function to append FB parameters to URLs
    function appendFBParamsToURL(url) {
        try {
            const urlObj = new URL(url, window.location.origin); // Ensure proper URL resolution
            if (fbp) urlObj.searchParams.set('fbp', fbp);
            if (fbc) urlObj.searchParams.set('fbc', fbc);
            return urlObj.toString();
        } catch (error) {
            console.error('Invalid URL:', url, error);
            return url; // Return the original URL if an error occurs
        }
    }

    // Function to update all anchor tags with FB parameters
    function updateAnchorTags() {
        const anchors = document.querySelectorAll('a[href]');
        anchors.forEach(anchor => {
            anchor.href = appendFBParamsToURL(anchor.href);
        });
    }

    // Attach event listeners to dynamically append FB parameters to clicked links
    document.addEventListener('DOMContentLoaded', () => {
        updateAnchorTags();

        document.body.addEventListener('click', event => {
            const target = event.target.closest('a[href]');
            if (target) {
                target.href = appendFBParamsToURL(target.href);
            }
        });
    });

    // Log the captured values for testing
    console.log('Facebook Pixel Data:', { fbp, fbc });
</script>

You can see that I extract the parameters from the browser cookie and append them to the page URL as parameters. That being done, I can later retrieve this URL parameters and save as data in my Bubble app.

To hash the user data you can use one of Bubble plugins: SHA-256 that works within the backend workflows.

6

Thanks.
I paused Meta Ads as of now so no need anymore, but I note this for a future day when I’ll reactivate them.

1 Like
7

This is brilliant. Getting hold of _fbp in Bubble was a major hurdle for me.

1 Like