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};