[Next.js] 添加 Google Tag Manager

简单简单再简单

2020-07-29 2,082 阅读1分钟

使用 react-gtm-module 插件，进行二次封装

import TagManager from 'react-gtm-module'

export default {
    init: function() {
        TagManager.initialize({ gtmId: 'gtmContainerId(gtm中复制)' });
    },
    push: function(obj: {}) {
        TagManager.dataLayer({
            dataLayer: obj
        })
    }
}

`pages/_app.tsx` 中执行 `init()` 方法做初始化

import gtm from '@/utils/gtm';

function MyApp(props) {
    useEffect(() => {
        gtm.init();
    }, []);
    //..
}

push() 示例

import gtm from '@/utils/gtm';

function Example() {
    return (
        <button
            type="button"
            onClick={() => gtm.push({
                event: 'next',
                userId: 111
            })}
        >
            Test push
        </button>
    )
}