Meta Pixel

Source code Package Browser ES5

Meta Pixel allows tracking visitor activity on a website and tracking conversions that appear in the Meta Ads Manager.

Configuration

To integrate Meta Pixel with your web application using walker.js, begin by setting up the configuration. The destination can be utilized in both Node and browser environments.

const config = {
  custom: {
    pixelId: '1234567890',
    currency: 'EUR',
    pageview: true,
  },
  mapping: {
    // e.g. order
    entity: {
      // e.g. complete
      action: {
        custom: {
          id: 'data.id',
          name: 'data.title',
          track: 'Purchase',
          value: 'data.revenue',
        },
      },
    },
  },
};

CustomConfig

Property	Type	Description
pixelId*	string	The 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.

CustomEventConfig

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)

How to use

First, define the config that you want to use for the destination:

const config = {
  custom: {
    pixelId: '1234567890',
  },
};

Choose one of the following installation options to use the destination:

TypeScript

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);

Script

Loading 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>

Code

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);
})();