Add new component for google analytics 4

packages/idyll-components/src/ga4-analytics.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+class Ga4Analytics extends React.PureComponent {
+  componentDidMount() {
+    try {
+      const url =
+        'https://www.googletagmanager.com/gtag/js?id=' + this.props.google;
+
+      (function(w, d, o, u) {
+        const ga4ScriptNode = d.createElement('script');
+        const firstONode = d.getElementsByTagName(o)[0];
+        ga4ScriptNode.async = 1;
+        ga4ScriptNode.src = u;
+        firstONode.parentNode.insertBefore(ga4ScriptNode, firstONode);
+      })(window, document, 'link', url);
+
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', this.props.google);
+    } catch (error) {
+      console.log('Could not mount google analytics 4: ' + error);
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+Ga4Analytics._idyll = {
+  name: 'Ga4Analytics',
+  tagType: 'closed',
+  props: [
+    {
+      name: 'google',
+      type: 'string',
+      example: '"G-XXXXXXX"',
+      defaultValue: 'none',
+      description: 'Component to add google analytics 4.'
+    }
+  ]
+};
+
+export default Ga4Analytics;

packages/idyll-components/src/index.js

@@ -46,3 +46,4 @@ export { default as TextContainer } from './text-container';
 export { default as TextInput } from './text-input';
 export { default as Tweet } from './tweet';
 export { default as Youtube } from './youtube';
+export { default as Ga4Analytics } from './ga4-analytics';

packages/idyll-components/test/components.js

@@ -44,7 +44,8 @@ const {
   H6,
   Desmos,
   Cite,
-  References
+  References,
+  Ga4Analytics
 } = require('../dist/cjs/index.js');
 
 describe('Sanity Check', () => {
@@ -181,6 +182,9 @@ describe('Sanity Check', () => {
       it('<Preload />', () => {
         expect(() => shallow(<Preload />)).not.toThrow();
       });
+      it('<Ga4Analytics />', () => {
+        expect(() => shallow(<Ga4Analytics />)).not.toThrow();
+      });
     });
   });
 
@@ -323,6 +327,9 @@ describe('Sanity Check', () => {
       it('<Preload />', () => {
         expect(() => mount(<Preload />)).not.toThrow();
       });
+      it('<Ga4Analytics />', () => {
+        expect(() => mount(<Ga4Analytics />)).not.toThrow();
+      });
     });
   });
 });

packages/idyll-docs/idyll-components/contents.js

@@ -342,6 +342,15 @@ const components = [
             liveExample: false
           }
         },
+        {
+          Ga4Analytics: {
+            thumbnail: 'analytics.png',
+            component: COMPONENTS.Ga4Analytics,
+            description:
+              'This component uses Google Analytics 4 code on your page. Universal Analytics properties will stop collecting data starting July 1, 2023. Google recommends to use Google Analytics 4 property instead.',
+            liveExample: false
+          }
+        },
         {
           Meta: {
             thumbnail: 'meta.png',

packages/idyll-docs/idyll-components/examples/Ga4Analytics.idl

@@ -0,0 +1 @@
+[Ga4Analytics google:"G-XXXXXXXXX" /]