Skip to content
This repository has been archived by the owner on May 20, 2024. It is now read-only.

feat: add GTM handler and options #43

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

feat: add GTM handler and options #43

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f332759
Added tag manager integration
eljass Feb 1, 2021
7aa3734
Update documentation with GTM integration
eljass Feb 1, 2021
4006727
Add docs of possible options with current defaults
eljass Feb 2, 2021
711ff58
Use shorthands and set "ga" to be default
eljass Feb 2, 2021
cf2aa63
Update usage example and default options
eljass Feb 4, 2021
c873d9c
Change eventHandler to support different tracking methods
eljass Feb 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ npm install nuxt-google-optimize --save
// experimentsDir: '~/experiments',
// maxAge: 60 * 60 * 24 * 7 // 1 Week
// pushPlugin: true,
// eventHandler: 'ga', // 'ga' (default) = Google Analytics integration || 'gtm' = @nuxtjs/gtm-module integration || 'dataLayer' = GTM integration
// dataLayer: 'dataLayer', // eventHandler option has to be 'dataLayer' when implementing custom GTM dataLayer
farzadso marked this conversation as resolved.
Show resolved Hide resolved
// excludeBots: true,
// botExpression: /(bot|spider|crawler)/i
}
Expand Down Expand Up @@ -222,6 +224,22 @@ import './styles.scss'
}
```

## Usage with GTM

- Set `options.eventHandler` to 'gtm' or 'dataLayer' depending which integration style you use for Tag Manager.
- Edit your "Page view (Google Analytics)" -tag in [Google Tag Manager](https://tagmanager.google.com/#/home)
- Add new "Fields to Set":
- Field Name: exp
- Value: {{googleOptimizeExp}}
- Add new Data Layer Variable called "googleOptimizeExp" as defined above.
- Variable type: Data Layer Variable
- Data Layer Variable Name: exp

[Source for this setup lossleader's answer in StackOverflow](https://stackoverflow.com/a/53253769/871677)

Now this module pushes experiment id and variable number to Google Analytics via Google Tag Manager.
experiment.experimentID + '.' + experiment.$variantIndexes.join('-')

## Development

- Clone this repository
Expand Down
2 changes: 2 additions & 0 deletions lib/module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ module.exports = async function module (moduleOptions) {
experimentsDir: '~/experiments',
maxAge: 60 * 60 * 24 * 7, // 1 Week
plugins: [],
eventHandler: 'ga',
dataLayer: 'dataLayer',
excludeBots: true,
botExpression: /(bot|spider|crawler)/i
},
Expand Down
23 changes: 18 additions & 5 deletions lib/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,14 +120,27 @@ function setCookie(ctx, name, value, maxAge = <%= options.maxAge %>) {
}

// https://developers.google.com/optimize/devguides/experiments
function googleOptimize({ experiment }) {
if (process.server || !window.ga || !experiment || !experiment.experimentID) {
return
}
function googleOptimize({ experiment, $gtm }) {
if (process.server || !experiment || !experiment.experimentID) return

const exp = experiment.experimentID + '.' + experiment.$variantIndexes.join('-')

window.ga('set', 'exp', exp)
// Choose method to track experiment and variant
<% if (options.eventHandler === 'gtm') { %>
Copy link
Collaborator

@hecktarzuli hecktarzuli Feb 3, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like the wrong direction to me. What we are essentially doing is corrupting this module based on some select libraries. What we should be striving for instead is exposing exp so anyone can do whatever they like.

For example, at work we use Segment now, how would this integrate with that? etc.. I understand ga and gtm are common, but if I had my way I wouldn't have auto-included GA to begin with (call me a purist :P)

I do have more plans related to this, but I've been busy with MasteringNuxt for the past months :(

Letter C here (#26)
It's not difficult, I just don't have time at the moment. I think that's a better solution so people can use a 1-2 liner to wire up pretty much any other integration.

cc @farzadso

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hecktarzuli I absolutely agree with you. A completely global solution would be much better and we'd be giving the flexibility users require.

Copy link
Author

@eljass eljass Feb 4, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my newest update, what do you think of dynamic handling of tracking. This would allow users to define their own function to send tracking events. I tested this with $gtm module and it worked well.

This is pretty much the same solution as here #13.

This same issue also seems to be addressed in three PR right now. If there is something I can do to speed up the development of the wanted way to implement this functionality just tell me! We need this to work in our product and I would like to use this module and not my own fork in it to achieve this.

@hecktarzuli @farzadso

// Use @nuxtjs/gtm-module
if (!$gtm) return
$gtm.push({ exp })
<% } else if (options.eventHandler === 'dataLayer') { %>
// Use other tag manager integration
const gtmDataLayer = window[<%= options.dataLayer %>]
if (!gtmDataLayer) return
gtmDataLayer.push({ exp })
<% } else { %>
// Default: use Google Analytics integration
const { ga } = window
if (!ga) return
ga('set', 'exp', exp)
<% } %>
}

// should we skip bots?
Expand Down