Getting started with @d-cat/tag-template-facebook

Tag Template to initialize Facebook Pixels and send events to Facebook Analytics.

Install

npm i @d-cat/tag-template-facebook

Usage

The class returns 9 methods: init, create, customEvent, viewContent, addToCart, initiateCheckout, addPaymentInfo, purchase and pageview.

import Facebook from '@d-cat/tag-template-facebook';

const facebook = new Facebook({
  threshold: 0.01,
  pixels: [
    {
      id: '12345',
      sendEcommerce: true,
      sendStandard: true,
      enableAutoConfig: false,
      options: {},
      customDimensions: {
        test: 1,
      },
    },
  ],
});

Interfaces

Manifest

The Manifest interface, usually generated by Google Tag Manager, should look something like:

{
  "threshold": 0.01,
  "pixels": [
    {
      "id": "765935103419141",
      "sendStandard": true,
      "customDimensions": {
        "customDimensions": [
          {
            "key": "cd1",
            "value": "ziggo.cust"
          }
        ]
        "gtmEventId": 0
      },
      "sendEcommerce": true,
      "enableAutoConfig": false
    }
  ],
  "gtmTagId": 2147483646,
  "gtmEventId": 0
}

IEcommercePayload

The ecommerce payload is used to determine what productinformation should be forwarded to Facebook.

{
  "data": {
    "step_name": "checkout",
    "products": [
      {
        "sku": "12345",
        "name": "product",
        "category": "internet",
        "quantity": "2"
      }
    ],
    "revenue": "10.12"
  }
}

init(): boolean

The init method injects the Facebook API in the head of the page. It returns true when Facebook API already was injected, false otherwise.

Example

facebook.init();

create(manifest?: IManifest): boolean

The create method creates a facebook trigger and returns if the Facebook API already existed.

Example

facebook.create();

customEvent(customEvent: string, options?: any, manifest?: IManifest): boolean

The customEvent method pushes a custom event to the Facebook API. It returns true if also a log is send to DDM, false otherwise. You can set the threshold for the logs in the manifest.

Example

facebook.customEvent('click');

viewContent(data: models.IEcommercePayload, manifest?: IManifest): boolean

The viewContent method sends a ViewContent event to Facebook.

Example

facebook.viewContent({
  data: {
    step_name: 'checkout',
    products: [
      {
        sku: '12345',
        name: 'product',
        category: 'internet',
        quantity: '2',
      },
    ],
    revenue: '10.12',
  },
});

addToCart(data: models.IEcommercePayload, manifest?: IManifest): boolean

The addToCart method sends a addToCart event to Facebook.

Example

facebook.addToCart({
  data: {
    step_name: 'checkout',
    products: [
      {
        sku: '12345',
        name: 'product',
        category: 'internet',
        quantity: '2',
      },
    ],
    revenue: '10.12',
  },
});

initiateCheckOut(data: models.IEcommercePayload, manifest?: IManifest): boolean

The initiateCheckOut method sends a initiateCheckOut event to Facebook.

Example

facebook.initiateCheckOut({
  data: {
    step_name: 'checkout',
    products: [
      {
        sku: '12345',
        name: 'product',
        category: 'internet',
        quantity: '2',
      },
    ],
    revenue: '10.12',
  },
});

addPaymentInfo(data: models.IEcommercePayload, manifest?: IManifest): boolean

The addPaymentInfo method sends a addPaymentInfo event to Facebook.

Example

facebook.addPaymentInfo({
  data: {
    step_name: 'checkout',
    products: [
      {
        sku: '12345',
        name: 'product',
        category: 'internet',
        quantity: '2',
      },
    ],
    revenue: '10.12',
  },
});

purchase(data: models.IEcommercePayload, manifest?: IManifest): boolean

The purchase method sends a purchase event to Facebook.

Example

facebook.purchase({
  data: {
    step_name: 'checkout',
    products: [
      {
        sku: '12345',
        name: 'product',
        category: 'internet',
        quantity: '2',
      },
    ],
    revenue: '10.12',
  },
});

pageview(manifest?: IManifest): boolean

The pageview method sends a pageview event to Facebook.

Example

facebook.pageview({
  data: {
    step_name: 'checkout',
    products: [
      {
        sku: '12345',
        name: 'product',
        category: 'internet',
        quantity: '2',
      },
    ],
    revenue: '10.12',
  },
});