vue-gtag-next/dist/vue-gtag-next.umd.js

Global Site Tag (gtag.js) plugin for Vue 3

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
  (global = global || self, factory(global.VueGtag = {}, global.vue));
}(this, (function (exports, vue) { 'use strict';

  var isBrowser = function isBrowser() {
    return typeof document !== "undefined" && typeof window !== "undefined";
  };
  var loadScript = function loadScript(source, preconnect) {
    return new Promise(function (resolve, reject) {
      var head = document.head || document.getElementsByTagName("head")[0];
      var script = document.createElement("script");
      script.async = true;
      script.src = source;
      script.charset = "utf-8";

      if (preconnect) {
        var link = document.createElement("link");
        link.href = preconnect;
        link.rel = "preconnect";
        head.appendChild(link);
      }

      head.appendChild(script);
      script.onload = resolve;
      script.onerror = reject;
    });
  };
  var merge = function merge() {
    var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var newObj = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    Object.keys(newObj).forEach(function (key) {
      obj[key] = newObj[key];
    });
  };

  var state = vue.reactive({
    property: null,
    isEnabled: true,
    disableScriptLoader: false,
    useDebugger: false,
    globalObjectName: "gtag",
    dataLayerName: "dataLayer",
    resourceURL: "https://www.googletagmanager.com/gtag/js",
    preconnectOrigin: "https://www.googletagmanager.com",
    customResource: null,
    appName: null,
    appId: null,
    appVersion: null
  });
  var useState = function useState() {
    return vue.toRefs(state);
  };
  var defaultProperty = vue.computed(function () {
    var _useState = useState(),
        property = _useState.property;

    if (!property.value) {
      return;
    }

    if (Array.isArray(property.value)) {
      return property.value.find(function (p) {
        return p["default"] === true;
      }) || property.value[0];
    }

    return property.value;
  });
  var hasId = vue.computed(function () {
    var _useState2 = useState(),
        property = _useState2.property;

    return Boolean(property.value && property.value.id !== null);
  });
  var allProperties = vue.computed(function () {
    var _useState3 = useState(),
        property = _useState3.property;

    if (Array.isArray(property.value)) {
      return property.value;
    }

    return [property.value];
  });
  var isTracking = vue.computed(function () {
    var _useState4 = useState(),
        isEnabled = _useState4.isEnabled;

    var property = defaultProperty.value;
    return Boolean(property && property.id && isEnabled.value);
  });

  var query = (function () {
    var _window;

    if (!isBrowser()) {
      return;
    }

    var _useState = useState(),
        globalObjectName = _useState.globalObjectName,
        useDebugger = _useState.useDebugger;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    if (useDebugger.value) {
      console.warn("[vue-gtag] Debugger:", args);
    }

    (_window = window)[globalObjectName.value].apply(_window, args);
  });

  var config = (function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    allProperties.value.forEach(function (property) {
      query.apply(void 0, ["config", property.id].concat(args));
    });
  });

  var customMap = (function (map) {
    config({
      custom_map: map
    });
  });

  var disable = (function () {
    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;

    if (!isBrowser()) {
      return;
    }

    allProperties.value.forEach(function (property) {
      window["ga-disable-".concat(property.id)] = value;
    });
  });

  var event = (function (eventName) {
    var eventParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var params = Object.assign({}, eventParams);

    if (!params.send_to && allProperties.value.length > 1) {
      params.send_to = allProperties.value.map(function (property) {
        return property.id;
      });
    }

    query("event", eventName, params);
  });

  var exception = (function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    event.apply(void 0, ["exception"].concat(args));
  });

  var linker = (function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    config.apply(void 0, ["linker"].concat(args));
  });

  var pageview = (function (value) {
    var params = {};

    if (typeof value === "string") {
      params = {
        page_path: value,
        page_location: window.location.href
      };
    } else {
      params = value;
    }

    if (typeof params.send_page_view === "undefined") {
      params.send_page_view = true;
    }

    event("page_view", params);
  });

  var purchase = (function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    event.apply(void 0, ["purchase"].concat(args));
  });

  var refund = (function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    event.apply(void 0, ["refund"].concat(args));
  });

  var screenview = (function () {
    var _useState = useState(),
        appName = _useState.appName,
        appId = _useState.appId,
        appVersion = _useState.appVersion;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    var arg = args[0];
    var params = {};

    if (typeof arg === "string") {
      params = {
        screen_name: arg
      };
    } else {
      params = arg;
    }

    if (params.app_name == null && appName.value != null) {
      params.app_name = appName.value;
    }

    if (params.app_id == null && appId.value != null) {
      params.app_id = appId.value;
    }

    if (params.app_version == null && appVersion.value != null) {
      params.app_version = appVersion.value;
    }

    event("screen_view", params);
  });

  var set = (function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    query.apply(void 0, ["set"].concat(args));
  });

  var time = (function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    event.apply(void 0, ["timing_complete"].concat(args));
  });

  var api = /*#__PURE__*/Object.freeze({
    __proto__: null,
    config: config,
    customMap: customMap,
    disable: disable,
    event: event,
    exception: exception,
    linker: linker,
    pageview: pageview,
    purchase: purchase,
    query: query,
    refund: refund,
    screenview: screenview,
    set: set,
    time: time
  });

  var isReady = vue.ref(false);
  var isBootstrapped = vue.ref(false);
  var bootstrap = function bootstrap() {
    var _useState = useState(),
        disableScriptLoader = _useState.disableScriptLoader,
        preconnectOrigin = _useState.preconnectOrigin,
        resourceURL = _useState.resourceURL,
        dataLayerName = _useState.dataLayerName;

    if (!isBrowser() || !hasId.value || isBootstrapped.value) {
      return;
    }

    isBootstrapped.value = true;
    allProperties.value.forEach(function (property) {
      var params = Object.assign({
        send_page_view: false
      }, property.params);
      query("config", property.id, params);
    });

    if (disableScriptLoader.value) {
      isReady.value = true;
      return;
    }

    var resource = "".concat(resourceURL.value, "?id=").concat(defaultProperty.value.id, "&l=").concat(dataLayerName.value);
    loadScript(resource, preconnectOrigin.value).then(function () {
      isReady.value = true;
    });
  };
  var useBootstrapWatcher = function useBootstrapWatcher() {
    vue.watch(function () {
      return isTracking.value;
    }, function (val) {
      return val && bootstrap();
    }, {
      immediate: true
    });
  };

  var registerGlobalObject = (function () {
    if (!isBrowser()) {
      return;
    }

    var _useState = useState(),
        globalObjectName = _useState.globalObjectName,
        dataLayerName = _useState.dataLayerName;

    if (window[globalObjectName.value] == null) {
      window[dataLayerName.value] = window[dataLayerName.value] || [];

      window[globalObjectName.value] = function () {
        window[dataLayerName.value].push(arguments);
      };
    }

    window[globalObjectName.value]("js", new Date());
  });

  var useGtag = (function () {
    return api;
  });

  var routerState = vue.reactive({
    template: null,
    useScreenview: false,
    skipSamePath: true
  });
  var useRouterState = function useRouterState() {
    return vue.toRefs(routerState);
  };

  var getTemplate = function getTemplate() {
    var to = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

    var _useRouterState = useRouterState(),
        template = _useRouterState.template,
        useScreenview = _useRouterState.useScreenview;

    var customTemplate = template.value ? template.value(to, from) : null;

    if (customTemplate) {
      return customTemplate;
    } else if (useScreenview.value) {
      return {
        screen_name: to.name
      };
    } else {
      return {
        page_title: to.name,
        page_path: to.path,
        page_location: window.location.href
      };
    }
  };
  var trackPage = function trackPage() {
    var to = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

    var _useRouterState2 = useRouterState(),
        useScreenview = _useRouterState2.useScreenview,
        skipSamePath = _useRouterState2.skipSamePath;

    if (skipSamePath.value && to.path === from.path) {
      return;
    }

    var params = getTemplate(to, from);

    if (useScreenview.value) {
      screenview(params);
    } else {
      pageview(params);
    }
  };
  var trackRouter = function trackRouter(router) {
    var newState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    merge(routerState, newState);
    vue.watch(function () {
      return isTracking.value;
    }, function (val) {
      if (!val) {
        return;
      }

      router.isReady().then(function () {
        vue.nextTick(function () {
          trackPage(router.currentRoute.value);
        });
        router.afterEach(function (to, from) {
          vue.nextTick(function () {
            trackPage(to, from);
          });
        });
      });
    }, {
      immediate: true
    });
  };

  var index = {
    install: function install(app) {
      var newState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      merge(state, newState);
      registerGlobalObject();
      useBootstrapWatcher();
      app.config.globalProperties.$gtag = api;
    }
  };

  exports.config = config;
  exports.customMap = customMap;
  exports.default = index;
  exports.disable = disable;
  exports.event = event;
  exports.exception = exception;
  exports.isReady = isReady;
  exports.isTracking = isTracking;
  exports.linker = linker;
  exports.pageview = pageview;
  exports.purchase = purchase;
  exports.query = query;
  exports.refund = refund;
  exports.screenview = screenview;
  exports.set = set;
  exports.time = time;
  exports.trackRouter = trackRouter;
  exports.useGtag = useGtag;
  exports.useState = useState;

  Object.defineProperty(exports, '__esModule', { value: true });

})));