https://github.com/swup/gtm-plugin
A swup plugin for integrating Google Tag Manager 📈
https://github.com/swup/gtm-plugin
analytics google-tag-manager gtm page-transitions plugin swup
Last synced: 3 days ago
JSON representation
A swup plugin for integrating Google Tag Manager 📈
- Host: GitHub
- URL: https://github.com/swup/gtm-plugin
- Owner: swup
- License: mit
- Created: 2019-04-30T21:41:19.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-08-06T18:12:49.000Z (2 months ago)
- Last Synced: 2025-09-10T23:40:40.616Z (27 days ago)
- Topics: analytics, google-tag-manager, gtm, page-transitions, plugin, swup
- Language: JavaScript
- Homepage: https://swup.js.org/plugins/google-tag-manager-plugin
- Size: 448 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Swup GTM Plugin
A [swup](https://swup.js.org) plugin for integrating Google Tag Manager.
- Trigger a custom event after each page change to associate with a page view within GTM
- This event is not triggered on intial load, so the first page view must be triggered elsewhere
- The event is a `VirtualPageview` with `virtualPageURL` and `virtualPageTitle` properties
Simplified code run by this plugin on the `page:view` hook:
```js
window.dataLayer.push({
event: 'VirtualPageview',
virtualPageURL: window.location.pathname + window.location.search,
virtualPageTitle: document.title
});
```
## Installation
Install the plugin from npm and import it into your bundle.
```bash
npm install @swup/gtm-plugin
```
```js
import SwupGtmPlugin from '@swup/gtm-plugin';
```
Or include the minified production file from a CDN:
```html
```
## Usage
To run this plugin, include an instance in the swup options.
```javascript
const swup = new Swup({
plugins: [new SwupGtmPlugin()]
});
```