Opt-in/out

#GDPR

To facilitate things like GDPR, cookies banners, policy banners or simply the need for an API request to return the domain ID, the plugin will automatically start bootstrapping only if the property.id is assigned.

If no domain ID is passed, only the global object and the dataLayer will be initialised, but no script will be loaded and no event will be sent.

Here an example on how to wait until an API request is done and assign data to the plugin state

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag-next";

const app = createApp(App);

app.use(VueGtag);

// App.vue
import axios from "axios";
import { useState, isTracking } from "vue-gtag-next";

export default {
  setup() {
    const { property } = useState();

    axios.get("/api/something").then((response) => {
      property.value = {
        id: response.domainId,
        params: {
          user_id: response.userId,
        },
      };
    });

    return {
      isTracking,
    };
  },
};

If there is still the need to wait, while already having a domain ID, we can disable the plugin and enable it when we want later on

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag-next";

const app = createApp(App);

app.use(VueGtag, {
  property: { id: "UA-1234567-1" },
  isEnabled: false,
});

// App.vue
import { useState, isTracking } from "vue-gtag-next";

export default {
  setup() {
    const { isEnabled } = useState();
    const enable = () => {
      isEnabled.value = true;
    };

    return {
      isTracking,
      enable,
    };
  },
};