import React, { Fragment } from "react";
import Script from "next/script";

export const Tracking = ({ googleTagManagerID, nonce }) => (
    <Fragment>
        <Script
            id="google-analytics"
            strategy="afterInteractive"
            nonce={nonce}
            dangerouslySetInnerHTML={{
                __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
					new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
					j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
					'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
				})(window,document,'script','dataLayer','${googleTagManagerID}');`,
            }}
        />
    </Fragment>
);

export const TrackingNoScript = ({ googleTagManagerID }) => (
    <Fragment>
        <noscript>
            <iframe
                title="google analytics"
                src={`https://www.googletagmanager.com/ns.html?id=${googleTagManagerID}`}
                height="0"
                width="0"
                style={{ display: "none", visibility: "hidden" }}
            />
        </noscript>
    </Fragment>
);