template.tpl

___TERMS_OF_SERVICE___

By creating or modifying this file you agree to Google Tag Manager's Community
Template Gallery Developer Terms of Service available at
https://developers.google.com/tag-manager/gallery-tos (or such other URL as
Google may provide), as modified from time to time.


___INFO___

{
  "type": "TAG",
  "id": "cvt_temp_public_id",
  "version": 1,
  "securityGroups": [],
  "displayName": "Elevar Monitoring Facebook Tag",
  "brand": {
    "id": "brand_dummy",
    "displayName": "",
    "thumbnail": "data:image/png;base64,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\u003d"
  },
  "description": "The Facebook Tag adds monitoring to your Facebook Tags. Attach FB tag information to your variable errors and notice critical errors immediately.\n\nThe tag is powered by Elevar Monitoring Variables.",
  "categories": ["UTILITY", "ANALYTICS", "TAG_MANAGEMENT"],
  "containerContexts": [
    "WEB"
  ]
}


___TEMPLATE_PARAMETERS___

[
  {
    "type": "TEXT",
    "name": "tagName",
    "displayName": "Tag Name",
    "simpleValueType": true,
    "help": "This should equal the GTM Tag Name. This is used to report what tags were associated to the error to Elevar Monitoring dashboard."
  },
  {
    "type": "TEXT",
    "name": "type",
    "displayName": "Type",
    "simpleValueType": true,
    "defaultValue": "track",
    "alwaysInSummary": true,
    "valueValidators": [
      {
        "type": "NON_EMPTY"
      }
    ],
    "help": "This will be used as the first parameter of the \"fbq\" function",
    "valueHint": "track"
  },
  {
    "type": "TEXT",
    "name": "event",
    "displayName": "Event",
    "simpleValueType": true,
    "alwaysInSummary": true,
    "help": "This will be used as the second parameter of the \"fbq\" function",
    "valueHint": "Purchase"
  },
  {
    "type": "PARAM_TABLE",
    "name": "content",
    "displayName": "Data",
    "paramTableColumns": [
      {
        "param": {
          "type": "TEXT",
          "name": "key",
          "displayName": "Key",
          "simpleValueType": true
        },
        "isUnique": true
      },
      {
        "param": {
          "type": "TEXT",
          "name": "value",
          "displayName": "Value",
          "simpleValueType": true
        },
        "isUnique": false
      },
      {
        "param": {
          "type": "TEXT",
          "name": "variableName",
          "displayName": "Variable Name",
          "simpleValueType": true,
          "enablingConditions": [],
          "help": "If you used a GTM variable as the value in the previous field input the name of that GTM variable here. The variable name is used to associate the variable errors to the tags that used those variables."
        },
        "isUnique": false
      }
    ],
    "help": "(Optional) This will be converted to a JSON object and will be sent as the third parameter of the \"fbq\" function."
  }
]


___SANDBOXED_JS_FOR_WEB_TEMPLATE___

const log = require("logToConsole");
const createQueue = require("createQueue");
const callInWindow = require("callInWindow");

const TAG_INFO = "elevar_gtm_tag_info";
const addTagInformation = createQueue(TAG_INFO);

const variablesUsed = [];

/*
NOTE: This is almost identical to the snapchat template, so if a bug
is fixed here. It should also be fixed in the snapchat template.
*/

if (!data.content && !data.event) {
  data.gtmOnFailure();
}

if (data.content) {
  // Additional Data to send
  const contentObj = {};
  data.content.forEach(item => {
    contentObj[item.key] = item.value;
    if (item.variableName) variablesUsed.push(item.variableName);
  });

  callInWindow("fbq", data.type, data.event, contentObj);
} else {
  callInWindow("fbq", data.type, data.event);
}

addTagInformation({
  channel: 'facebook',
  tagName: data.tagName,
  eventId: data.gtmEventId,
  variables: variablesUsed
});

data.gtmOnSuccess();


___WEB_PERMISSIONS___

[
  {
    "instance": {
      "key": {
        "publicId": "access_globals",
        "versionId": "1"
      },
      "param": [
        {
          "key": "keys",
          "value": {
            "type": 2,
            "listItem": [
              {
                "type": 3,
                "mapKey": [
                  {
                    "type": 1,
                    "string": "key"
                  },
                  {
                    "type": 1,
                    "string": "read"
                  },
                  {
                    "type": 1,
                    "string": "write"
                  },
                  {
                    "type": 1,
                    "string": "execute"
                  }
                ],
                "mapValue": [
                  {
                    "type": 1,
                    "string": "elevar_gtm_tag_info"
                  },
                  {
                    "type": 8,
                    "boolean": true
                  },
                  {
                    "type": 8,
                    "boolean": true
                  },
                  {
                    "type": 8,
                    "boolean": false
                  }
                ]
              },
              {
                "type": 3,
                "mapKey": [
                  {
                    "type": 1,
                    "string": "key"
                  },
                  {
                    "type": 1,
                    "string": "read"
                  },
                  {
                    "type": 1,
                    "string": "write"
                  },
                  {
                    "type": 1,
                    "string": "execute"
                  }
                ],
                "mapValue": [
                  {
                    "type": 1,
                    "string": "fbq"
                  },
                  {
                    "type": 8,
                    "boolean": false
                  },
                  {
                    "type": 8,
                    "boolean": false
                  },
                  {
                    "type": 8,
                    "boolean": true
                  }
                ]
              }
            ]
          }
        }
      ]
    },
    "clientAnnotations": {
      "isEditedByUser": true
    },
    "isRequired": true
  },
  {
    "instance": {
      "key": {
        "publicId": "logging",
        "versionId": "1"
      },
      "param": [
        {
          "key": "environments",
          "value": {
            "type": 1,
            "string": "debug"
          }
        }
      ]
    },
    "isRequired": true
  }
]


___TESTS___

scenarios:
- name: With Variable Name
  code: |-
    // Call runCode to run the template's code.
    runCode(mockData);

    // Verify that the tag finished successfully.
    assertApi('gtmOnSuccess').wasCalled();
    assertThat(calledInWindow).hasLength(1);
    assertThat(calledInWindow[0][0]).isEqualTo('fbq');
    assertThat(calledInWindow[0][1]).isEqualTo('track');
    assertThat(calledInWindow[0][2]).isEqualTo('AddToCart');
    assertThat(calledInWindow[0][3]).isEqualTo({content_ids: "Cool"});
    assertThat(window[TAG_INFO]).hasLength(1);
    assertThat(window[TAG_INFO][0].tagName).isEqualTo('Facebook - Add to Cart');
    assertThat(window[TAG_INFO][0].eventId).isEqualTo(13);
    assertThat(window[TAG_INFO][0].variables).isEqualTo(['dlv - Product View - SKU']);
- name: With No Variable Name
  code: |-
    mockData.content[0] = { key: "test", value:"10", variableName: "" };

    // Call runCode to run the template's code.
    runCode(mockData);

    // Verify that the tag finished successfully.
    assertApi('gtmOnSuccess').wasCalled();
    assertApi('callInWindow').wasCalledWith('fbq', 'track', 'AddToCart', {test: "10"});
    assertThat(window[TAG_INFO]).hasLength(1);
    assertThat(window[TAG_INFO][0].variables).isEqualTo([]);
- name: With Multiple Mixed
  code: |
    mockData.content.push(
      { key: "currency", value:"USD", variableName: "" },
      { key: "value", value: 30.00, variableName: "dlv - Product Price" }
    );

    // Call runCode to run the template's code.
    runCode(mockData);

    // Verify that the tag finished successfully.
    assertApi('gtmOnSuccess').wasCalled();
    assertApi('callInWindow').wasCalledWith('fbq', 'track', 'AddToCart', {content_ids: "Cool", currency: 'USD', value: 30.00 });
    assertThat(window[TAG_INFO]).hasLength(1);
    assertThat(window[TAG_INFO][0].variables).isEqualTo(["dlv - Product View - SKU", "dlv - Product Price"]);
- name: With No Data
  code: |-
    mockData = {
      tagName: "Facebook - Page View",
      type: 'track',
      event: "PageView",
      gtmEventId: 13,
    };

    // Call runCode to run the template's code.
    runCode(mockData);

    // Verify that the tag finished successfully.
    assertApi('gtmOnSuccess').wasCalled();
    assertApi('callInWindow').wasCalledWith('fbq', 'track', 'PageView');
    assertThat(window[TAG_INFO]).hasLength(1);
    assertThat(window[TAG_INFO][0].variables).isEqualTo([]);
- name: Has Channel
  code: |-
    // Call runCode to run the template's code.
    runCode(mockData);

    // Verify that the tag finished successfully.
    assertApi('gtmOnSuccess').wasCalled();
    assertThat(window[TAG_INFO]).hasLength(1);
    assertThat(window[TAG_INFO][0].channel).isEqualTo('facebook');
setup: "const log = require('logToConsole');\n\n// Custom window object used by mock\
  \ functions\nlet window = {};\nconst TAG_INFO = 'elevar_gtm_tag_info';\n\n// Mock\
  \ data used in template\nlet mockData = {\n  tagName: \"Facebook - Add to Cart\"\
  ,\n  type: \"track\",\n  event: \"AddToCart\",\n  content: [\n    { key: \"content_ids\"\
  , value: \"Cool\", variableName: \"dlv - Product View - SKU\" },\n  ],\n  gtmTagId:\
  \ 2147483645,\n  gtmEventId: 13\n};\n\n/*\nCreates an array in the window with the\
  \ key provided and\nreturns a function that pushes items to that array.\n*/\nmock('createQueue',\
  \ (key) => {\n  const pushToArray = (arr) => (item) => {\n    arr.push(item);\n\
  \  };\n  \n  if (!window[key]) window[key] = [];\n  return pushToArray(window[key]);\n\
  });\n\n/*\ncallInWindow mock function\nsaves data on what function were called and\
  \ with what params.\ncallInWindow('fbq', data.type, data.event, contentObj);\n*/\n\
  let calledInWindow = [];\nmock('callInWindow', function () {\n  const args = arguments;\n\
  \  \n  // Beware: This does not represent exactly what was called.\n  if (args[3])\
  \ {\n\tlog(args[0] + \"('\" + args[1] + \"', '\" + args[2] + \"',\", args[3], \"\
  )\");\n  } else {\n    log(args[0] + \"('\" + args[1] + \"', '\" + args[2] + \"\
  ')\");\n  }\n  calledInWindow.push(args);\n});"


___NOTES___

Created on 18/02/2020, 18:41:48