Global Site Tag plugin for Vue (gtag.js)

Overview


vue-gtag

Global Site Tag plugin for Vue

The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform. For general gtag.js documentation, read the gtag.js developer guide.

Vue 3 update

Released Vue 3 compatible version on this new repo https://github.com/MatteoGabriele/vue-gtag-next and you can install the package under vue-gtag-next. I will release it under the vue-gtag package once Vue will officially release version 3 as latest version. If you have any feedback, please consider opening an issue on https://github.com/MatteoGabriele/vue-gtag-next/issues 🙏

Requirements

Vue ^2.0.0

Install

npm install vue-gtag

Documentation

Issues and features requests

Please drop an issue, if you find something that doesn't work, or a feature request at https://github.com/MatteoGabriele/vue-gtag/issues

Follow me on twitter @matteo_gabriele for updates

Sponsors

Homerun.co
Issues
  • Something happened and gtag.js couldn't be loaded

    Something happened and gtag.js couldn't be loaded

    Description

    "gtag.js couldn't be loaded"

    image

    Expected behavior

    Is should load the gtag.js library.

    Actual behavior

    "gtag.js couldn't be loaded"

    Environment

    Using vue-gtag version 1.1.2.

    1. Operating system: Mac OS 10.15.2 (19C57)
    2. Browser and version: Google Chrome 79.0.3945.130

    Reproducible Demo

    Created empty vue project with vue create, added vue-gtag by using yarn add vue-gtag

    main.ts

    Vue.use(VueGtag, {
      config: { id: 'GTM-XXXXXX' },
    });
    
    opened by yooouuri 18
  • Vue 3 support?

    Vue 3 support?

    Hi and thank you for this plugin. While trying to add analytics on vite and vue 3 being in RC3 I was wondering if you have any plans on supporting these. Right now I'm getting:

    Uncaught TypeError: Cannot set property '$gtag' of undefined
    

    Many Thanks

    P2: Very Important refactor released major release 
    opened by cliqer 18
  • Use with Gridsome

    Use with Gridsome

    This is really a request for a bit of guidance on using vue-gtag with Gridsome. I can just about get something going as far as basic analytics tagging but I'm trying to figure out a conversion event for a specific page and I'm stuck.

    I know you can import VueGtag in the main.js and add the ID there too... but the closest I've got in the individual page script is the following, which doesn't quite work:

    this.$gtag.event('conversion', {
                 'send_to': 'AW-000000/randomlettersetc',
               });
    
    

    Any thoughts? I know this is probably very easy but I'm getting to grips with both Vue and Gridsome at the same time and docs aren't always clear about how to translate from the general to the specific.

    need more info 
    opened by Rocketpilot 15
  • Plugin not sending any data to Google

    Plugin not sending any data to Google

    I've got the latest version of Vue Gtag 1.10.0, and for some reason it's not sending any page view events or nothing to Google. Why is this?

    import VueGtag from 'vue-gtag'
    
    Vue.use(VueGtag, {
      config: {
        id: 'UA-91198233-2'
      }
    })
    

    My config remains unchanged, Vue 2 project

    reproduction needed need more info 
    opened by sts-ryan-holton 15
  • 1.6.3 seems to stop reporting data

    1.6.3 seems to stop reporting data

    Description

    Upgrading from 1.6.2 to 1.6.3 completely stopped the reporting of data.

    Expected behavior

    Data should be reported as before.

    Actual behavior

    The analytics dashboard reports 0 active people and 0 events in real time.

    Environment

    Run this command in the project folder and fill in their results:

    npm ls vue-gtag:

    Then, specify:

    1. Operating system: MacOS 10.15.5
    2. Browser and version: Chrome 83.0.4103.97
    bug P1: Urgent released 
    opened by mattias-persson 14
  • How to enable after user consent?

    How to enable after user consent?

    Matteo, first of all thanks a lot for this awesome plugin!

    I'm building a cookie banner and as per the documentation I can see how I can load the plugin with enabled: false. What is missing from the docs is how to actually enable it again after user consent - including sending the first pageview.

    Can you point me into the right direction?

    Thanks in advance - all the best, Sumit

    opened by codeofsumit 13
  • share knowledge!

    share knowledge!

    Since this Google gtag.js project is pretty new and kinda complicated, with not so much documentation yet and very less amount of actual implementation example into real project, whatever you know that you want to share or if you want to contribute with your code: please feel free to do :)

    cheers!

    help wanted question 
    opened by MatteoGabriele 10
  • Initial page load tracking not calling pageTrackerTemplate

    Initial page load tracking not calling pageTrackerTemplate

    Description

    Initial page loaded is being tracked incorrectly. pageTrackerTemplate is not being called.

    Expected behavior

    When loading the site, I'd expect the tracking of the initial page to call pageTrackerTemplate to get my custom title value.

    Actual behavior

    An event is sent with the actual document title which is not what I want to send. For example, my route.meta.title is set to 'Classes'. However, I have a router.afterEach hook that prepends 'Site Name | ' to it and sets document.title.

    Environment

    Run this command in the project folder and fill in their results:

    npm ls vue-gtag: [email protected]

    Then, specify:

    1. Operating system: Linux Mint
    2. Browser and version: Chrome Version 81.0.4044.92 (Official Build) (64-bit)

    Reproducible Demo

    const routes = [
    	{
    		name: 'home',
    		path: '/',
    		component: () => import('pages/Home.vue'),
    		meta: {
    			title: () => 'Home',
    		},
    	},
    ]
    
    router.afterEach((to, from) => {
    	if (to.meta && to.meta.title) {
    		const title = to.meta.title(to)
    		if (title) {
    			document.title = 'My Site | ' + title
    		} else {
    			document.title = 'My Site'
    		}
    	}
    })
    
    pageTrackerTemplate(to, from) {
    	const trackingData = {
    		page_title: to.meta.title ? to.meta.title(to) : to.name,
    		page_path: to.path,
    		page_location: window.location.href,
    	}
    	return trackingData
    },
    
    bug P2: Very Important 
    opened by bnason 10
  • V 1.0 Release Date?

    V 1.0 Release Date?

    Hey Matteo,

    The company I work for is using vue-analytics and loving it, but we're wanting to migrate over to gtag for some of the newer features.

    Do you have a status update on this library? We'd love to hear about any plans for the release of this project, or about any of the roadblocks that are still holding it back.

    Thanks

    opened by HMilbradt 10
  • VueRouter set but gtag take browser page title

    VueRouter set but gtag take browser page title

    Hi,

    I configure vue-gtag to use vuerouter but when I watch gtag query, browser page title is sent (not route name). When I debug plugin, parameters are set correctly :

    Configuration :

    Vue.use(VueGtag, { config: { id: "GTM-XXXXXXX" } }, router);

    Parameters in vue-gtag : { page_title : 'MyRouteName', page_location : 'MyLocation', page_path: 'MyPath' }

    I don't understand why...

    My version of vue-gtag is 1.10.0

    Thank you for your help.

    opened by Bkl741 9
  • Two tracking ids added (including one unknown)

    Two tracking ids added (including one unknown)

    I am using vue-gtag version 2.0.1 and added the following configuration

    const myApp = createApp(App)
      .use(router)
      .use(VueGtag, {
        config: { id: "UA-XXXXXXXX-X" },
      })
    

    After deploying the following two scripts are included in the page:

    <script type="text/javascript" async="" src="http://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX&amp;l=dataLayer&amp;cx=c"></script>
    
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X&amp;l=dataLayer"></script>
    

    I never specified the tag G-XXXXXXXXXX in any way in the configuration. Does vue-gtag add it's own tracking id?

    opened by thopit 0
  • chore(deps-dev): bump @babel/core from 7.14.0 to 7.15.5

    chore(deps-dev): bump @babel/core from 7.14.0 to 7.15.5

    Bumps @babel/core from 7.14.0 to 7.15.5.

    Release notes

    Sourced from @​babel/core's releases.

    v7.15.5 (2021-09-04)

    :eyeglasses: Spec Compliance

    :leftwards_arrow_with_hook: Revert

    Committers: 3

    v7.15.4 (2021-09-02)

    Thanks @​flyinox, @​komyg, and @​meskill for your first PRs!

    :eyeglasses: Spec Compliance

    • babel-helper-create-class-features-plugin, babel-helpers, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-class-properties, babel-plugin-proposal-private-methods, babel-plugin-proposal-private-property-in-object, babel-preset-env, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

    :bug: Bug Fix

    :memo: Documentation

    :house: Internal

    • babel-helper-create-class-features-plugin, babel-plugin-proposal-class-static-block, babel-plugin-proposal-private-property-in-object, babel-plugin-syntax-class-static-block, babel-plugin-syntax-private-property-in-object, babel-plugin-syntax-top-level-await, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-preset-env, babel-standalone

    :running_woman: Performance

    ... (truncated)

    Changelog

    Sourced from @​babel/core's changelog.

    v7.15.5 (2021-09-04)

    :eyeglasses: Spec Compliance

    :leftwards_arrow_with_hook: Revert

    v7.15.4 (2021-09-02)

    :eyeglasses: Spec Compliance

    • babel-helper-create-class-features-plugin, babel-helpers, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-class-properties, babel-plugin-proposal-private-methods, babel-plugin-proposal-private-property-in-object, babel-preset-env, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

    :bug: Bug Fix

    :memo: Documentation

    :house: Internal

    • babel-helper-create-class-features-plugin, babel-plugin-proposal-class-static-block, babel-plugin-proposal-private-property-in-object, babel-plugin-syntax-class-static-block, babel-plugin-syntax-private-property-in-object, babel-plugin-syntax-top-level-await, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-preset-env, babel-standalone

    :running_woman: Performance

    • babel-core, babel-generator, babel-helper-annotate-as-pure, babel-helper-builder-binary-assignment-operator-visitor, babel-helper-builder-react-jsx, babel-helper-define-map, babel-helper-explode-assignable-expression, babel-helper-function-name, babel-helper-get-function-arity, babel-helper-hoist-variables, babel-helper-member-expression-to-functions, babel-helper-module-imports, babel-helper-module-transforms, babel-helper-optimise-call-expression, babel-helper-remap-async-to-generator, babel-helper-replace-supers, babel-helper-simple-access, babel-helper-skip-transparent-expression-wrappers, babel-helper-split-export-declaration, babel-helper-wrap-function, babel-helpers, babel-preset-env, babel-template, babel-traverse
    • babel-cli, babel-helper-define-map, babel-helpers, babel-node, babel-parser, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-decorators, babel-plugin-transform-classes, babel-plugin-transform-for-of, babel-plugin-transform-modules-systemjs, babel-plugin-transform-parameters, babel-traverse, babel-types

    v7.15.3 (2021-08-11)

    :eyeglasses: Spec Compliance

    • babel-helpers, babel-plugin-transform-classes

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump jest from 26.6.3 to 27.2.4

    chore(deps-dev): bump jest from 26.6.3 to 27.2.4

    Bumps jest from 26.6.3 to 27.2.4.

    Release notes

    Sourced from jest's releases.

    27.2.4

    Features

    • [expect] Add equality checks for Array Buffers in expect.ToStrictEqual() (#11805)

    Fixes

    • [jest-snapshot] Correctly indent inline snapshots (#11560)

    27.2.3

    Features

    • [@jest/fake-timers] Update @sinonjs/fake-timers to v8 (#11879)

    Fixes

    • [jest-config] Parse testEnvironmentOptions if received from CLI (#11902)
    • [jest-reporters] Call destroy on v8-to-istanbul converters to free memory (#11896)

    27.2.2

    Fixes

    • [jest-runtime] Correct wrapperLength value for ESM modules. (#11893)

    27.2.1

    Features

    • [jest-transform] Improve the unexpected token error message. (#11807)

    Fixes

    • [jest-runtime] Fix regression when using jest.isolateModules and mocks (#11882)
    • [jest-runtime] Include test name when importing modules after test has completed (#11885)
    • [jest-runtime] Error when ESM import is used after test is torn down (#11885)

    27.2.0

    Features

    • [jest-resolver, jest-runtime] Pass conditions to custom resolvers to enable them to implement support for package.json exports field (#11859)
    • [jest-runtime] Allow custom envs to specify exportConditions which is passed together with Jest's own conditions to custom resolvers (#11863)

    Fixes

    • [@jest/reporters] Use async transform if available to transform files with no coverage (#11852)
    • [jest-util] Return correct value from process.send stub (#11799)

    27.1.1

    Features

    • [jest-runtime] Add experimental, limited (and undocumented) support for mocking ECMAScript Modules (#11818)

    ... (truncated)

    Changelog

    Sourced from jest's changelog.

    27.2.4

    Features

    • [expect] Add equality checks for Array Buffers in expect.ToStrictEqual() (#11805)

    Fixes

    • [jest-snapshot] Correctly indent inline snapshots (#11560)

    27.2.3

    Features

    • [@jest/fake-timers] Update @sinonjs/fake-timers to v8 (#11879)

    Fixes

    • [jest-config] Parse testEnvironmentOptions if received from CLI (#11902)
    • [jest-reporters] Call destroy on v8-to-istanbul converters to free memory (#11896)

    27.2.2

    Fixes

    • [jest-runtime] Correct wrapperLength value for ESM modules. (#11893)

    27.2.1

    Features

    • [jest-transform] Improve the unexpected token error message. (#11807)

    Fixes

    • [jest-runtime] Fix regression when using jest.isolateModules and mocks (#11882)
    • [jest-runtime] Include test name when importing modules after test has completed (#11885)
    • [jest-runtime] Error when ESM import is used after test is torn down (#11885)

    27.2.0

    Features

    • [jest-resolver, jest-runtime] Pass conditions to custom resolvers to enable them to implement support for package.json exports field (#11859)
    • [jest-runtime] Allow custom envs to specify exportConditions which is passed together with Jest's own conditions to custom resolvers (#11863)

    Fixes

    • [@jest/reporters] Use async transform if available to transform files with no coverage (#11852)
    • [jest-util] Return correct value from process.send stub (#11799)

    ... (truncated)

    Commits
    • 5886f6c v27.2.4
    • 4185bb9 chore: update changelog for release
    • aaed73a docs: remove deprecated setupTestFrameworkScriptFile option and `setupFiles...
    • 2ca98ec chore: reject waitUntil if process exits (#11909)
    • 6b18aed fix(jest-snapshot): always run prettier format a second time (#11560)
    • fb0e09c Clarify behavior of transformIgnorePatterns when including multiple pattern...
    • 94734e1 feat(expect): Add equality support for Array Buffers to ToStrictEqual method ...
    • 784b6a7 docs: fix regression introduced in #11904 (#11905)
    • 3553865 chore: run prettier on docs
    • fc97f3e chore: remove p-each-series dep (#11903)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump prettier from 2.2.1 to 2.4.1

    chore(deps-dev): bump prettier from 2.2.1 to 2.4.1

    Bumps prettier from 2.2.1 to 2.4.1.

    Release notes

    Sourced from prettier's releases.

    2.4.1

    đź”— Changelog

    2.4.0

    diff

    Release note

    2.3.2

    changelog

    v2.3.1

    Changelog

    2.3.0

    diff

    đź”— Release Notes

    Changelog

    Sourced from prettier's changelog.

    2.4.1

    diff

    Fix wildcard syntax in @forward (#11482) (#11487 by @​niksy)

    // Input
    @forward "library" as btn-*;
    

    // Prettier 2.4.0 @​forward "library" as btn- *;

    // Prettier 2.4.1 @​forward "library" as btn-*;

    Add new CLI option debug-print-ast (#11514 by @​sosukesuzuki)

    A new --debug-print-ast CLI flag for debugging.

    2.4.0

    diff

    đź”— Release Notes

    2.3.2

    diff

    Fix failure on dir with trailing slash (#11000 by @​fisker)

    $ ls
    1.js  1.unknown
    

    Prettier 2.3.1

    $ prettier . -l 1.js $ prettier ./ -l [error] No supported files were found in the directory: "./".

    Prettier 2.3.2

    $ prettier ./ -l 1.js

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump core-js from 3.11.1 to 3.18.1

    chore(deps-dev): bump core-js from 3.11.1 to 3.18.1

    Bumps core-js from 3.11.1 to 3.18.1.

    Changelog

    Sourced from core-js's changelog.

    3.18.1 - 2021.09.27
    • Fixed String.prototype.substr feature detection and compat data
    • Removed mistakenly added .forEach from prototypes of some DOM collections where it shouldn't be, #988, #987, thanks @​moorejs
    • Added cause to AggregateError constructor implementation (still without adding to the feature detection)
    • Families of .at and .findLast methods marked as supported in Safari TP
    • Added Electron 16.0 compat data mapping
    3.18.0 - 2021.09.20
    • Added Array.fromAsync stage 1 proposal:
      • Array.fromAsync
      • %TypedArray%.fromAsync
    • .name and .toString() on polyfilled functions improved in many different cases
    • Improved internal IsConstructor and IsCallable checks
    • Fixed some internal cases of GetMethod operation
    • Fixed a bug of MS Edge 18- parseInt / parseFloat with boxed symbols
    • Fixed es.array.{ index-of, last-index-of } compat data
    • Added Deno 1.15 compat data mapping
    • Some other minor fixes and optimizations
    3.17.3 - 2021.09.09
    • Fixed some possible problems related to possible extension of %IteratorPrototype% and %AsyncIteratorPrototype% in the future
    • Fixed DOMTokenList.prototype.{ forEach, @@iterator, keys, values, entries } in old WebKit versions where element.classList is not an instance of global DOMTokenList
    • Added NodeJS 16.9 compat data mapping
    • Added Samsung Internet 16.0 compat data mapping
    3.17.2 - 2021.09.03
    • Fixed missed cases of ES3 reserved words usage, related to #980
    • Fixed dependencies in one missed entry point
    • Some other minor fixes and optimizations
    3.17.1 - 2021.09.02
    • Fixed missed modules-by-versions data
    3.17.0 - 2021.09.02
    3.16.4 - 2021.08.29
    • AsyncFromSyncIterator made stricter, related mainly to AsyncIterator.from and AsyncIterator.prototype.flatMap
    • Handling of optional .next arguments in (Async)Iterator methods is aligned with the current spec draft (mainly - ignoring the first passed to .next argument in built-in generators)
    • Behavior of .next, .return, .throw methods on AsyncIterator helpers proxy iterators aligned with the current spec draft (built-in async generators) (mainly - some early errors moved to returned promises)
    • Fixed some cases of safe iteration closing
    • Fixed dependencies of some entry points
    3.16.3 - 2021.08.25
    • Fixed CreateAsyncFromSyncIterator semantic in AsyncIterator.from, related to #765
    • Added a workaround of a specific case of broken Object.prototype, #973

    ... (truncated)

    Commits
    • 1a347bd 3.18.1
    • 8e488ce some stylistic changes
    • 41f0354 update dependencies
    • 71adeb4 fix has own -> has
    • ddec5d8 some stylistic changes
    • 8c1b38e update eslint-plugin-regexp, clean some duplicated rules
    • 84b1520 add Electron 16.0 compat data mapping
    • 958ebe4 add cause to AggregateError constructor implementation (still without add...
    • e3a4f75 fix a typo
    • ea021d2 update dependencies
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Proposal for some useful functionalities.

    Proposal for some useful functionalities.

    Hi @MatteoGabriele! Congratulation for this nice Vue package. Here some useful functionalities that can be added to vue-gtag to get better control over the plugin.

    1. Add method to check if gtag DOM elements (script and link) are already included (with or without bootstrap() method).
    2. Alternative: with method bootstrap() check before if gtag DOM elements (script and link) are already included to avoid duplicate gtag DOM elements. If already included don't add DOM elements.
    3. Add method to remove (unload, inverse of bootstrap()) the gtag DOM elements.
    4. Add possibility to exclude tracking on single route or all sub-routes in the tree by setting a meta value in routes definitions.
    5. Split pageTrackerExcludedRoutes to two separate settings pageTrackerExcludedRoutePaths and pageTrackerExcludedRouteNames to speed up the code.

    Here an example for proposal 4. and 5.:

    const isRouteExcluded = (route) => {
      const { pageTrackerExcludedRoutePaths: paths, pageTrackerExcludedRouteNames: names } = getOptions();
      return paths.includes(route.path) || names.includes(route.name) || 
             route.meta.gtagExcludeRoute || route.matched.some((record) => record.meta.gtagExcludeRouteTree);
    };
    
    if (isRouteExcluded(to)) {
      return;
    }
    
    opened by phlegx 0
  • Not tracked on dynamic content

    Not tracked on dynamic content

    Hi,

    I'm reporting an issue with this, or maybe I'm doing something wrong.

    Everything work fine for nearly all of my website.

    The problem come in my blog on the single post pages, where user is not detected.

    However, the googletagmanager is loaded normally in thoses page, as the others pages.

    My single post pages load content from external wordpress endpoint and inject them in my page with this code :

    
    async asyncData({ $axios, params}) {
        const post = await $axios.get('https://blog.deussearch.fr/wp-json/wp/v2/posts/'+params.postid);
        const post_data = post.data;
        return {
           post_data
       }
     },
    

    Maybe it's this code who break the system ?

    opened by gnicolas31 0
  • fixed linker parameter

    fixed linker parameter

    I got an error below when I tried to use gtag's cross-domain functionality with this plugin.

    screenshot

    According to the official gtag document, it seems to be a matter of parameter format.

    https://developers.google.com/analytics/devguides/collection/gtagjs/cross-domain#automatically_link_domains

    It should be:

    query("config", "GA_MEASUREMENT_ID", { linker: { domains: [...]  }});
    

    not:

    query("config", "GA_MEASUREMENT_ID", "linker", { domains: [...]  });
    
    opened by zentooo 0
  • Page refresh required after optIn is executed to get cookies

    Page refresh required after optIn is executed to get cookies

    Description

    I am wanting to use my own cookie consent banner in conjunction with this library.

    • this.$gtag.optIn() calling works correctly, however, a full page reload or a route change is required before the events are pushed from the dataLayer and cookies are added to the cookie store.

    Expected behavior

    • I'm not sure what I expect, I am not sure if this behaviour is correct

    Actual behavior

    See above.

    Environment

    Run this command in the project folder and fill in their results:

    npm ls vue-gtag: [email protected]

    Then, specify:

    1. Operating system: Mac OS
    2. Browser and version: Chrome - Version 89.0.4389.128 (Official Build) (x86_64)

    Reproducible Demo

    main.js

    import Vue from 'vue';
    import VueGtag from 'vue-gtag';
    import App from './App.vue';
    import router from './router/router';
    import store from './store/store';
    
    Vue.use(VueGtag, {
      config: { id: 'G-xxxxxxx' },
      enabled: false,
    });
    
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount('#app');
    
    

    CookieConsentBanner.vue

    <template>
    <!-- eslint-disable max-len -->
    <div v-if="allowAdvertising === null && allowAnalytics === null" class="fixed inset-x-0 bottom-0">
      <div class="bg-gray-600">
        <div class="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
          <div class="flex items-center justify-between flex-wrap">
            <div class="w-0 flex-1 flex items-center">
              <p class="ml-3 font-small text-white">
                <span class="hidden md:inline">
                  PDFCloud uses cookies to deliver and improve the website experience. See our cookie policy for further details on how we use cookies and how to change your cookie settings.
                </span>
              </p>
            </div>
            <div class="order-3 ml-2 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
              <button v-on:click="acceptAll" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-800 bg-white hover:bg-gray-100">
                Accept all
              </button>
            </div>
            <div class="order-3 ml-2 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
              <a href="#" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-800 bg-white hover:bg-gray-100">
                Manage Cookies
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- eslint-enable max-len -->
    </template>
    
    <script>
    import { createNamespacedHelpers } from 'vuex';
    import { UPDATE_CONSENT } from '@/store/actions/consent/actions';
    
    const { mapState: mapConsentState, mapActions: mapConsentActions } = createNamespacedHelpers('consent');
    
    export default {
      name: 'CookieConsentBanner',
    
      computed: {
        ...mapConsentState({
          allowAdvertising: (state) => state.allowAdvertising,
          allowAnalytics: (state) => state.allowAnalytics,
        }),
      },
    
      methods: {
        ...mapConsentActions([UPDATE_CONSENT]),
        acceptAll() {
          this.$gtag.optIn();
          this.updateConsent({ allowAdvertising: true, allowAnalytics: true });
        },
      },
    };
    </script>
    
    
    opened by markabruce 0
  • chore(deps-dev): bump regenerator-runtime from 0.13.7 to 0.13.9

    chore(deps-dev): bump regenerator-runtime from 0.13.7 to 0.13.9

    Bumps regenerator-runtime from 0.13.7 to 0.13.9.

    Commits
    • 5d76fce Bump regenerator-runtime patch version to 0.13.9.
    • 6c46b30 Tiny package-lock.json tweak.
    • 47424f0 Add Node.js 16.x to the test rotation.
    • ce990db Bump @​babel/core from 7.13.10 to 7.14.8 (#478)
    • 34dca95 Don't let Babel incorrectly clone the input AST (#481)
    • cfbd19b Update uglify-js to latest version.
    • 8b83d14 Bump browserslist from 4.16.3 to 4.16.6 (#460)
    • f9d87d7 Bump @​babel/cli from 7.13.10 to 7.14.8 (#479)
    • 4fddac2 Bump lodash from 4.17.19 to 4.17.21 (#448)
    • 7d9f271 Bump @​babel/types from 7.13.13 to 7.14.8 (#476)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
Releases(v2.0.1)
Owner
Matteo Gabriele
Building things that might help other developers to build other things.
Matteo Gabriele
Simple implementation of Google Tag Manager in Vue.js 2.0

Vue Google Tag Manager *** Maintainers & Contributors welcome *** Simple implementation of Google Tag Manager in Vue.js This plugin will help you in y

Manish Kumar 236 Sep 6, 2021
Google Universal Analytics support in Vue.js

Vue Analytics Simple implementation of Google Analytics in Vue.js This plugin will helps you in your common analytics tasks. Dispatching events, regis

Andréas Hanss 216 Jul 12, 2021