Meta Pixel

Web Source code Package

Meta Pixel (formerly Facebook Pixel) tracks visitor activity and conversions for Facebook and Instagram advertising campaigns. The destination automatically sends events to Meta Pixel via fbq function. All you need to do is install the destination, and optionally map events to Meta's format. walkerOS takes care of loading the script and the function calls.

Installation

npm install @walkeros/web-destination-meta

Setup

import { startFlow } from '@walkeros/collector';
import { destinationMeta } from '@walkeros/web-destination-meta';

const { collector, elb } = await startFlow({
  destinations: {
    meta: {
      code: destinationMeta,
      config: {
        settings: {
          pixelId: '1234567890', // Your Meta Pixel ID
        },
        loadScript: true, // Load Meta Pixel script automatically
      },
    },
  },
});

Configuration reference

Property	Type	Description	More
`pixelId*`	`string`	Your Meta Pixel ID from Facebook Business Manager
`loadScript`	`boolean`	Whether to automatically load the Meta Pixel script (fbevents.js)

* Required fields

Example

Settings

{
  pixelId: "1234567890"
}

{
  pixelId: "1234567890"
}

Result

No event yet.

No event yet.

Mapping examples

tip

The code examples are interactive. You can edit the code to generate your individual event mapping.

Learn more aboot Meta Pixel's Standard-Events.

ViewContent

Event

{
  name: "product view",
  data: {
    id: "ers",
    name: "Everyday Ruck Snack",
    color: "black",
    size: "l",
    price: 420
  },
  context: {
    shopping: [
      "detail",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [],
  consent: {
    functional: true
  },
  id: "1760660017000-gr0up-1",
  trigger: "load",
  entity: "product",
  action: "view",
  timestamp: 1760660017000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.2.0",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{
  name: "product view",
  data: {
    id: "ers",
    name: "Everyday Ruck Snack",
    color: "black",
    size: "l",
    price: 420
  },
  context: {
    shopping: [
      "detail",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [],
  consent: {
    functional: true
  },
  id: "1760660017000-gr0up-1",
  trigger: "load",
  entity: "product",
  action: "view",
  timestamp: 1760660017000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.2.0",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

Mapping

{
  name: "ViewContent",
  data: {
    map: {
      value: "data.price",
      currency: {
        value: "EUR"
      },
      content_type: {
        value: "product"
      },
      contents: {
        set: [
          {
            map: {
              id: "data.id",
              quantity: {
                key: "data.quantity",
                value: 1
              }
            }
          }
        ]
      }
    }
  }
}

{
  name: "ViewContent",
  data: {
    map: {
      value: "data.price",
      currency: {
        value: "EUR"
      },
      content_type: {
        value: "product"
      },
      contents: {
        set: [
          {
            map: {
              id: "data.id",
              quantity: {
                key: "data.quantity",
                value: 1
              }
            }
          }
        ]
      }
    }
  }
}

Result

No event yet.

No event yet.

AddToCart

Event

{
  name: "product add",
  data: {
    id: "ers",
    name: "Everyday Ruck Snack",
    color: "black",
    size: "l",
    price: 420
  },
  context: {
    shopping: [
      "intent",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [],
  consent: {
    functional: true
  },
  id: "1760660017000-gr0up-1",
  trigger: "click",
  entity: "product",
  action: "add",
  timestamp: 1760660017000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.2.0",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{
  name: "product add",
  data: {
    id: "ers",
    name: "Everyday Ruck Snack",
    color: "black",
    size: "l",
    price: 420
  },
  context: {
    shopping: [
      "intent",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [],
  consent: {
    functional: true
  },
  id: "1760660017000-gr0up-1",
  trigger: "click",
  entity: "product",
  action: "add",
  timestamp: 1760660017000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.2.0",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

Mapping

{
  name: "AddToCart",
  data: {
    map: {
      value: "data.price",
      currency: {
        value: "EUR"
      },
      contents: {
        set: [
          {
            map: {
              id: "data.id",
              quantity: {
                key: "data.quantity",
                value: 1
              }
            }
          }
        ]
      },
      content_type: {
        value: "product"
      }
    }
  }
}

{
  name: "AddToCart",
  data: {
    map: {
      value: "data.price",
      currency: {
        value: "EUR"
      },
      contents: {
        set: [
          {
            map: {
              id: "data.id",
              quantity: {
                key: "data.quantity",
                value: 1
              }
            }
          }
        ]
      },
      content_type: {
        value: "product"
      }
    }
  }
}

Result

No event yet.

No event yet.

InitiateCheckout

Event

{
  name: "cart view",
  data: {
    currency: "EUR",
    value: 840
  },
  context: {
    shopping: [
      "cart",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [
    {
      entity: "product",
      data: {
        id: "ers",
        name: "Everyday Ruck Snack",
        color: "black",
        size: "l",
        price: 420,
        quantity: 2
      },
      context: {
        shopping: [
          "cart",
          0
        ]
      },
      nested: []
    }
  ],
  consent: {
    functional: true
  },
  id: "1760660017000-gr0up-1",
  trigger: "load",
  entity: "cart",
  action: "view",
  timestamp: 1760660017000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.2.0",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{
  name: "cart view",
  data: {
    currency: "EUR",
    value: 840
  },
  context: {
    shopping: [
      "cart",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [
    {
      entity: "product",
      data: {
        id: "ers",
        name: "Everyday Ruck Snack",
        color: "black",
        size: "l",
        price: 420,
        quantity: 2
      },
      context: {
        shopping: [
          "cart",
          0
        ]
      },
      nested: []
    }
  ],
  consent: {
    functional: true
  },
  id: "1760660017000-gr0up-1",
  trigger: "load",
  entity: "cart",
  action: "view",
  timestamp: 1760660017000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.2.0",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

Mapping

{
  name: "InitiateCheckout",
  data: {
    map: {
      value: "data.value",
      currency: {
        value: "EUR"
      },
      contents: {
        loop: [
          "nested",
          {
            map: {
              id: "data.id",
              quantity: {
                key: "data.quantity",
                value: 1
              }
            }
          }
        ]
      },
      num_items: {}
    }
  }
}

{
  name: "InitiateCheckout",
  data: {
    map: {
      value: "data.value",
      currency: {
        value: "EUR"
      },
      contents: {
        loop: [
          "nested",
          {
            map: {
              id: "data.id",
              quantity: {
                key: "data.quantity",
                value: 1
              }
            }
          }
        ]
      },
      num_items: {}
    }
  }
}

Result

No event yet.

No event yet.

Purchase

Event

{
  name: "order complete",
  data: {
    id: "0rd3r1d",
    currency: "EUR",
    shipping: 5.22,
    taxes: 73.76,
    total: 555
  },
  context: {
    shopping: [
      "complete",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [
    {
      entity: "product",
      data: {
        id: "ers",
        name: "Everyday Ruck Snack",
        color: "black",
        size: "l",
        price: 420
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      entity: "product",
      data: {
        id: "cc",
        name: "Cool Cap",
        size: "one size",
        price: 42
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      entity: "gift",
      data: {
        name: "Surprise"
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    }
  ],
  consent: {
    functional: true
  },
  id: "1760660017000-gr0up-1",
  trigger: "load",
  entity: "order",
  action: "complete",
  timestamp: 1760660017000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.2.0",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{
  name: "order complete",
  data: {
    id: "0rd3r1d",
    currency: "EUR",
    shipping: 5.22,
    taxes: 73.76,
    total: 555
  },
  context: {
    shopping: [
      "complete",
      0
    ]
  },
  globals: {
    pagegroup: "shop"
  },
  custom: {
    completely: "random"
  },
  user: {
    id: "us3r",
    device: "c00k13",
    session: "s3ss10n"
  },
  nested: [
    {
      entity: "product",
      data: {
        id: "ers",
        name: "Everyday Ruck Snack",
        color: "black",
        size: "l",
        price: 420
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      entity: "product",
      data: {
        id: "cc",
        name: "Cool Cap",
        size: "one size",
        price: 42
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      entity: "gift",
      data: {
        name: "Surprise"
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    }
  ],
  consent: {
    functional: true
  },
  id: "1760660017000-gr0up-1",
  trigger: "load",
  entity: "order",
  action: "complete",
  timestamp: 1760660017000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.2.0",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

Mapping

{
  name: "Purchase",
  data: {
    map: {
      value: "data.total",
      currency: {
        value: "EUR"
      },
      contents: {
        loop: [
          "nested",
          {
            map: {
              id: "data.id",
              quantity: {
                key: "data.quantity",
                value: 1
              }
            }
          }
        ]
      },
      content_type: {
        value: "product"
      },
      num_items: {}
    }
  }
}

{
  name: "Purchase",
  data: {
    map: {
      value: "data.total",
      currency: {
        value: "EUR"
      },
      contents: {
        loop: [
          "nested",
          {
            map: {
              id: "data.id",
              quantity: {
                key: "data.quantity",
                value: 1
              }
            }
          }
        ]
      },
      content_type: {
        value: "product"
      },
      num_items: {}
    }
  }
}

Result

No event yet.

No event yet.

💡 Need Professional Support?

Need professional support with your walkerOS implementation? Check out our services.

Installation​

Setup​

Configuration reference​

Example​

Mapping examples​

ViewContent​

AddToCart​

InitiateCheckout​

Purchase​

Installation

Setup

Configuration reference

Example

Mapping examples

ViewContent

AddToCart

InitiateCheckout

Purchase