Meta Pixel

With Meta Pixel you can track visitor activity on a website and track conversions to appear in the Meta Ads Manager.

Installation

TypeScript
Script
Code

Install the destination via npm

npm i @elbwalker/destination-web-meta-pixel

import { elb } from '@elbwalker/walker.js';
import destinationMetaPixel from '@elbwalker/destination-web-meta-pixel';

elb('walker destination', destinationMetaPixel, config);

Load the destination via dynamic import

<script>
  // Upload the dist/index.mjs on your own server
  const destination = (
    await import(
      'https://cdn.jsdelivr.net/npm/@elbwalker/destination-web-meta-pixel/dist/index.mjs'
    )
  ).default;

  elb('walker destination', destination, config);
</script>

Copy the code from the index.browser.js file

(function () {
  'use strict';
  var Destination = (() => {})(); // This is the copied code

  elb('walker destination', Destination.default, config);
})();

Configuration

Configure your meta pixel destination with your Pixel ID.

Example

Custom Config

{
  pixelId: '1234567890', // Required
}

{
  pixelId: '1234567890', // Required
}

Result

No event yet.

No event yet.

Custom

Property	Type	Description
pixelId*	string	Ads account ID used for every conversion
currency	string	Default currency for conversions
pageview	boolean	Whether to send the PageView event

Properties with a * are required.

CustomEvent

For the custom event mapping (mapping.entity.action.custom):

For track, use one of the official standard event names, otherwise trackCustom will be used.

Property	Type	Description
content_ids	string	Data property key to use in content_ids, e.g., "data.product_ids".
content_name	string	Data property key to use as content_name, e.g., "data.product_name".
content_type	string	Type of content, e.g., "product".
contents	object	Contains `id` and `quantity` for content, accessible via wildcard.
track	string	Standard event to track, e.g., "Purchase".
value	string	Data property key for value, e.g., "data.value".

contents is an object with the following properties:

id: PropertyMapping (string or object with key and optional default)
quantity: PropertyMapping (string or object with key and optional default)

Mapping

ViewContent

Event

{
  event: "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: "1741911217000-gr0up-1",
  trigger: "click",
  entity: "product",
  action: "add",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{
  event: "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: "1741911217000-gr0up-1",
  trigger: "click",
  entity: "product",
  action: "add",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

Custom Config

{
  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

{
  event: "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: "1741911217000-gr0up-1",
  trigger: "click",
  entity: "product",
  action: "add",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{
  event: "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: "1741911217000-gr0up-1",
  trigger: "click",
  entity: "product",
  action: "add",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

Custom Config

{
  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

{
  event: "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: [
    {
      type: "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: "1741911217000-gr0up-1",
  trigger: "load",
  entity: "cart",
  action: "view",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{
  event: "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: [
    {
      type: "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: "1741911217000-gr0up-1",
  trigger: "load",
  entity: "cart",
  action: "view",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

Custom Config

{
  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

{
  event: "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: [
    {
      type: "product",
      data: {
        id: "ers",
        name: "Everyday Ruck Snack",
        color: "black",
        size: "l",
        price: 420
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      type: "product",
      data: {
        id: "cc",
        name: "Cool Cap",
        size: "one size",
        price: 42
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      type: "gift",
      data: {
        name: "Surprise"
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    }
  ],
  consent: {
    functional: true
  },
  id: "1741911217000-gr0up-1",
  trigger: "load",
  entity: "order",
  action: "complete",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

{
  event: "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: [
    {
      type: "product",
      data: {
        id: "ers",
        name: "Everyday Ruck Snack",
        color: "black",
        size: "l",
        price: 420
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      type: "product",
      data: {
        id: "cc",
        name: "Cool Cap",
        size: "one size",
        price: 42
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    },
    {
      type: "gift",
      data: {
        name: "Surprise"
      },
      context: {
        shopping: [
          "complete",
          0
        ]
      },
      nested: []
    }
  ],
  consent: {
    functional: true
  },
  id: "1741911217000-gr0up-1",
  trigger: "load",
  entity: "order",
  action: "complete",
  timestamp: 1741911217000,
  timing: 3.14,
  group: "gr0up",
  count: 1,
  version: {
    source: "0.0.7",
    tagging: 1
  },
  source: {
    type: "web",
    id: "https://localhost:80",
    previous_id: "http://remotehost:9001"
  }
}

Custom Config

{
  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.

info

If you need professional support with your walkerOS implementation, check out our services.

Installation​

Configuration​

Example​

Custom​

CustomEvent​

Mapping​

ViewContent​

AddToCart​

InitiateCheckout​

Purchase​

Installation

Configuration

Example

Custom

CustomEvent

Mapping

ViewContent

AddToCart

InitiateCheckout

Purchase