@gudhub/ssg-web-components-library 1.0.67 → 1.0.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudhub/ssg-web-components-library",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/components/google-analytics/config.js

@@ -0,0 +1,6 @@
+export const GoogleAnalytics = {
+  tag: 'google-analytics',
+  category: 'Utilities',
+  src: '@gudhub/ssg-web-components-library/src/components/google-analytics/google-analytics.js',
+  serverOnly: false
+}

package/src/components/google-analytics/google-analytics.js

@@ -0,0 +1,41 @@
+class GoogleAnalytics extends GHComponent {
+    constructor() {
+        super();
+    }
+
+    onClientRender() {
+        const timeout = parseInt(this.getAttribute('data-timeout')) || 3000;
+        const googleId = this.getAttribute('data-googleId');
+        const script = document.createElement('script');
+
+        if (!googleId) {
+            script.innerHTML = 'No google id for analytics'
+        } else {
+            script.innerHTML = `
+                window.addEventListener('load', function () {
+                    setTimeout(function () {
+                        const gtagScript = document.createElement('script');
+                        gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=${googleId}';
+                        gtagScript.async = true;
+                        document.head.appendChild(gtagScript);
+
+                        gtagScript.onload = function () {
+                            window.dataLayer = window.dataLayer || [];
+                            function gtag() {
+                                dataLayer.push(arguments);
+                            }
+                            window.gtag = gtag;
+                            gtag('js', new Date());
+                            gtag('config', '${googleId}');
+                        };
+                    }, ${timeout});
+                });
+            `;
+        }
+
+        document.querySelector('body').appendChild(script);
+        this.remove();
+    }
+}
+
+window.customElements.define('google-analytics', GoogleAnalytics);

package/src/config.js

@@ -61,8 +61,10 @@ export { htmlTemplate } from './components/html-template/config.js';
 export { masonryGallery } from './components/masonry-gallery/config.js';
 export { pageBannerWithVideo } from './components/page-banner-with-video/config.js';
 export { youtubePlayer } from './components/youtube-player/config.js';
-export { getInTouchBlockWithImage } from './components/get-in-touch-block-with-image/config.js'
-export { PageBannerImageAndMenu } from './components/page-banner-image-and-menu/config.js'
+export { getInTouchBlockWithImage } from './components/get-in-touch-block-with-image/config.js';
+export { PageBannerImageAndMenu } from './components/page-banner-image-and-menu/config.js';
+export { GoogleAnalytics } from './components/google-analytics/config.js';
+
 
 
 // export { liqPayComponent } from './components/liqpay-component/config.js';