Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Add example reverse proxy handler for Facebook Pixel #648

Merged
merged 1 commit into from
Dec 6, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions docs/facebook-pixel.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,43 @@ Set the script element's `type` attribute to `text/partytown`. For example:

The `connect.facebook.net` response does not provide the correct CORS header, and a reverse proxy should be used. Below is an example of setting the `resolveUrl` config to proxy the `connect.facebook.net` requests. Please see [Proxying Requests](/proxying-requests) for more information.

## Proxying with Server Handlers

If you're using a server framework like Nuxt 3, you can handle proxying dynamically using API routes. Below is an example configuration that dynamically fetches resources based on the provided URL and returns the response with appropriate headers:

```js
export default defineEventHandler(async (event) => {
const query = getQuery(event);
const url = String(query?.url) || null;

if (!url || !url.includes("connect.facebook.net")) {
throw createError({
status: 500,
message: "Invalid URL",
});
}

// Fetch the file content dynamically based on the URL
const response = await $fetch(url).catch((error) => {
throw createError({
status: 500,
message: `Failed to fetch resource: ${error.message}`,
});
});

setResponseHeaders(event, {
"Access-Control-Allow-Origin": "*", // Ensures proper CORS handling
"Access-Control-Allow-Headers": "Content-Type, Authorization",
"Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
"Content-Type": "application/x-javascript; charset=utf-8",
"Cache-Control":
"public, max-age=5, s-maxage=5, stale-if-error=2678400, stale-while-revalidate=86400", // Add necessary caching headers
});

return response;
});
```
## Forward Events
Facebook Pixel uses the [fbq()](https://www.facebook.com/business/help/402791146561655?id=1205376682832142) function to send events. In order for Partytown to forward the calls to `window.fbq({..})`, the forward config should add `"fbq"`. Please see [forwarding events and triggers](/forwarding-events) for more information.
Expand Down
Loading