For test.

Author: sherakama

gatsby-browser.js

@@ -1,3 +1,6 @@
+import React from 'react';
+import { Script } from 'gatsby';
+
 /**
  * Implement Gatsby's Browser APIs in this file.
  *
@@ -20,3 +23,27 @@ export const shouldUpdateScroll = ({ routerProps: { location } }) => {
     return false;
   }
 };
+
+/**
+ * Add Heap Analytics script to the site.
+ */
+export const wrapPageElement = ({ element }) => {
+  const ID = '2306378928';
+
+  // Only load on production.
+  if (!process.env.CONTEXT || process.env.CONTEXT !== 'deploy-preview') {
+    return element;
+  }
+
+  return (
+    <>
+      <Script id="heap-id">
+        {`
+          window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
+          heap.load(${ID});
+        `}
+      </Script>
+      {element}
+    </>
+  );
+};

gatsby-ssr.js

@@ -1,8 +1,35 @@
+import React from 'react';
+import { Script } from 'gatsby';
+
 /**
  * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
  *
  * See: https://www.gatsbyjs.org/docs/ssr-apis/
  */
 
 import SearchOverlayProvider from './src/context/searchOverlayStatusProvider';
-export const wrapRootElement = SearchOverlayProvider;
+export const wrapRootElement = SearchOverlayProvider;
+
+/**
+ * Add Heap Analytics script to the site.
+ */
+export const wrapPageElement = ({ element }) => {
+  const ID = '2306378928';
+
+  // Only load on production.
+  if (!process.env.CONTEXT || process.env.CONTEXT !== 'deploy-preview') {
+    return element;
+  }
+
+  return (
+    <>
+      <Script id="heap-id">
+        {`
+          window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
+          heap.load(${ID});
+        `}
+      </Script>
+      {element}
+    </>
+  );
+};

src/components/partials/htmlHead.js

@@ -1,16 +1,14 @@
 import React from 'react';
 import { Script } from 'gatsby';
 
-/**
- * Heap Analytics script
- */
-const ID = '2306378928';
-
 /*
  ** The HtmlHead component is included into the html.js file, to always be loaded.
  */
 
 const HtmlHead = () => {
+  // Heap ID
+  const ID = '2306378928';
+
   return (
     <>
       <link
@@ -108,13 +106,6 @@ const HtmlHead = () => {
         href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
         rel="stylesheet"
       />
-      <Script id="heap-id" strategy="post-hydrate">
-        {`
-          window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
-          heap.load(${ID});
-        `}
-      </Script>
-      <meta name="postheap" content="true" />
     </>
   );
 };