Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-gtm-custom
Advanced tools
Readme
This plugin will helps you in your common GTM tasks.
Note: If you are looking to track all Vuex mutations, you can use Vuex GTM plugin
Optionnals dependencies
npm install vue-gtm -S
or yarn add vue-gtm
if you use Yarn package manager
Here is an example of configuration, compose with it on your own :
import VueGtm from 'vue-gtm';
import VueRouter from 'vue-router';
const router = new VueRouter({ routes, mode, linkActiveClass });
Vue.use(VueGtm, {
id: 'GTM-xxxxxxx' or ['GTM-xxxxxxx', 'GTM-xxxxxxx'], // Your GTM single container ID or array of container ids ['GTM-xxxxxxx', 'GTM-yyyyyyy']
queryParams: { // Add url query string when load gtm.js with GTM ID (optional)
gtm_auth:'AB7cDEf3GHIjkl-MnOP8qr',
gtm_preview:'env-4',
gtm_cookies_win:'x'
},
defer: false, // defaults to false. Script can be set to `defer` to increase page-load-time at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible)
enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
debug: true, // Whether or not display console logs debugs (optional)
loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional)
vueRouter: router, // Pass the router instance to automatically sync with router (optional)
ignoredViews: ['homepage'], // If router, you can exclude some routes name (case insensitive) (optional)
trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
baseUrl: 'www.googletagmanager.com', // defaults to ''. Allows the base url modification from googletagmanager.com to a custom domain. Necessary for GTM Server-side usage
});
This injects the tag manager script in the page, except when enabled
is set to false
.
In that case it will be injected when calling this.$gtm.enable(true)
for the first time.
Remember to enable the History Change Trigger for router changes to be sent through GTM.
Once the configuration is completed, you can access vue gtm instance in your components like that :
export default {
name: 'MyComponent',
data() {
return {
someData: false
};
},
methods: {
onClick: function() {
this.$gtm.trackEvent({
event: null, // Event type [default = 'interaction'] (Optional)
category: 'Calculator',
action: 'click',
label: 'Home page SIP calculator',
value: 5000,
noninteraction: false // Optional
});
}
},
mounted() {
this.$gtm.trackView('MyScreenName', 'currentpath');
}
};
The passed variables are mapped with GTM data layer as follows
dataLayer.push({
'event': event || 'interaction',
'target': category,
'action': action,
'target-properties': label,
'value': value,
'interaction-type': noninteraction,
...rest
});
You can also access the instance anywhere whenever you imported Vue
by using Vue.gtm
. It is especially useful when you are in a store module or
somewhere else than a component's scope.
Thanks to vue-router guards, you can automatically dispatch new screen views on router change ! To use this feature, you just need to inject the router instance on plugin initialization.
This feature will generate the view name according to a priority rule :
gtm
this will take the value of this field for the view name.meta.gtm
it will fallback to the internal route name.Most of time the second case is enough, but sometimes you want to have more control on what is sent, this is where the first rule shine.
Example :
const myRoute = {
path: 'myRoute',
name: 'MyRouteName',
component: SomeComponent,
meta: { gtm: 'MyCustomValue' }
};
This will use
MyCustomValue
as the view name.
Check if plugin is enabled
this.$gtm.enabled()
Enable plugin
this.$gtm.enable(true)
Disable plugin
this.$gtm.enable(false)
Check if plugin is in debug mode
this.$gtm.debugEnabled()
Enable debug mode
this.$gtm.debug(true)
Disable plugin
this.$gtm.debug(false)
FAQs
A fork of vue-gtm version 2.3.4 with the possibility of using a custom base URL.
The npm package vue-gtm-custom receives a total of 2 weekly downloads. As such, vue-gtm-custom popularity was classified as not popular.
We found that vue-gtm-custom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.