app/src/hooks/useGTM.js (view raw)
1import {useEffect} from 'react';
2import {useStrapi} from 'strapi-react-context';
3
4const getHeadScript = gtmId => `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
5new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
6j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
7'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
8})(window,document,'script','dataLayer','${gtmId}');
9`;
10
11const getBodyScript = gtmId => `<iframe src="https://www.googletagmanager.com/ns.html?id=${gtmId}"
12height="0" width="0" style="display:none;visibility:hidden"></iframe>
13`;
14
15export default () => {
16 const strapi = useStrapi();
17
18 if (process.env.NODE_ENV !== 'production') return null;
19
20 useEffect(() => {
21 if (strapi.stores.settings) {
22 const [{gtm_id: gtmId}] = strapi.stores.settings;
23 if (gtmId) loadGTM(gtmId);
24 }
25 }, [strapi.stores.settings]);
26
27 const loadGTM = gtmId => {
28 const headScript = document.createElement('script');
29 headScript.innerHTML = getHeadScript(gtmId);
30 const bodyScript = document.createElement('noscript');
31 bodyScript.innerHTML = getBodyScript(gtmId);
32
33 document.head.insertBefore(headScript, document.head.childNodes[0]);
34 document.body.insertBefore(bodyScript, document.body.childNodes[0]);
35 };
36};