I’m currently setting up the FB Pixel for the first time (next.js). In development mode everything is working as expected and correctly.
My problem is production mode: I found out that the user ip address is somehow different in browser and server. When I hardcode an ip address, the tracking and deduplication works fine. But as soon as I get the value from server side props (header “x-forwarded-for”), the events from browser and server are tracked (event id is the same, user agent and ip are also passed) – but not deduplicated. By trying and playing with the code I found out that the ip address must be the issue.
Here is some relevant code:
//page.js
export async function getServerSideProps(context) {
const { req } = context;
const ip = req.headers["x-forwarded-for"];
const ua = req.headers["user-agent"];
return {
props: {
ip,
ua,
},
};
}
//and then use the props like so:
let values = {};
values.ip = ip;
useEffect(() => {
fbTriggerViewContent(values);
}, []);
//fbTriggerViewContent.js
const createSendingData = async (values, eventId) => {
return {
event_name: "ViewContent",
event_id: eventId,
event_time: Math.floor(Date.now() / 1000),
action_source: "website",
event_source_url: window.location.href,
user_data: {
client_user_agent: values.ua,
client_ip_address: "192.158.1.38"
/* process && process.env.NODE_ENV === "development"
? "192.158.1.38"
: values.ip, */
},
};
};
export default async function fbTriggerViewContent(values) {
const additionalData = {};
const eventId = crypto.randomUUID();
const sendData = await createSendingData(values, eventId);
fbq.event("ViewContent", additionalData, { eventID: eventId });
axios({
url: `https://graph.facebook.com/v20.0/${process.env.NEXT_PUBLIC_FB_PIXEL_ID}/events?access_token=${process.env.NEXT_PUBLIC_FB_ACCESS_TOKEN}`,
method: "POST",
headers: {
"Content-Type": "application/json",
},
data: {
data: [sendData],
test_event_code: process.env.NEXT_PUBLIC_TEST_ID,
},
}).then((response) => response);
}Can anyone help me with this issue?