Integrate Facebook Conversion API for Purchase Event using Javascript

This article explains how to use JavaScript to set up Facebook Conversion API for tracking Purchase Events. It’s a server-side approach that ensures all events are captured, even if ad blockers are active.

Following is the code to integrate Facebook Conversion API for Purchase Event using JavaScript:

<script>
    const pixelId = 'pixel_id';
    const accessToken = 'pixel_access_token';
    const apiUrl = `https://graph.facebook.com/v12.0/${pixelId}/events?access_token=${accessToken}`;
    
// Function to perform SHA-256 hashing
async function sha256(input) {
  const encoder = new TextEncoder();
  const data = encoder.encode(input);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
  return hashHex;
}
    
    const userEmail = "email@askdeveloper.net";
    const userFirstName = "Akash";
    const userLastName = "Sharma";
    const userCity = "Chandigarh";
    const userState = "Punjab";
    const userZip = "160066";
    const userCountry = "IN";
    const userPhone = "8892037134";

    
    (async () => {
        const hasheduserEmail = await sha256(userEmail);
        const hasheduserFirstName = await sha256(userFirstName);
        const hasheduserLastName  = await sha256(userLastName);
        const hasheduserCity = await sha256(userCity);
        const hasheduserState = await sha256(userState);
        const hasheduserZip = await sha256(userZip);
        const hasheduserCountry = await sha256(userCountry);
        const hasheduserPhone = await sha256(userPhone);

        const eventData = {
        "data": [
            {
                "event_name": "Purchase",
                "event_time": Math.floor(Date.now() / 1000),
                "event_id": "12345",
                "action_source": "website",
                "event_source_url": window.location.href,
                "user_data": {
                    "em": [hasheduserEmail],
                    "fn": [hasheduserFirstName],
                    "ln": [hasheduserLastName],
                    "ct": [hasheduserCity],
                    "st": [hasheduserState],
                    "zp": [hasheduserZip],
                    "ph": [hasheduserPhone],
                    "country": [hasheduserCountry]
                
                },
                "custom_data": {
                    "content_type": "product_group",
                    "currency": "INR",
                    "value": "160",
                    "order_id":"order_id"
                }
            }
        ]
    }
    
    fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(eventData),
  })
    .then(response => response.json())
    .then(data => {
      console.log('Conversion event sent:', data);
    })
    .catch(error => {
      console.error('Error sending conversion event:', error);
    });
})();
    </script>

Go to https://developers.facebook.com/docs/marketing-api/conversions-api/payload-helper to learn more about other events and parameters.