GTM Basic example

antistatique · Jun 29, 2023 · 1d248bb · 1d248bb
1 parent 01fdcf3
commit 1d248bb
Showing 1 changed file with 104 additions and 0 deletions.
diff --git a/gtm-basic.html b/gtm-basic.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>🍪 Leckerli - GTM (Basic)</title>
+
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function mygtag () {
+            dataLayer.push(arguments)
+        }
+        // default consent status
+        mygtag('consent', 'default', {
+            ad_storage: 'denied',
+            analytics_storage: 'denied',
+            functionality_storage: 'denied',
+            personalization_storage: 'denied',
+            security_storage: 'denied',
+            settings: 'denied',
+            wait_for_update: 3000,
+        });
+    </script>
+    <!-- Google Tag Manager -->
+    <script>(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','GTM-NGL2FLK');</script>
+    <!-- End Google Tag Manager -->
+  </head>
+  <body style="background: #cbd5e1; display: grid; place-content: center; font-family: sans-serif; min-height: 100vh;">
+    <h1>Your website here 🤗 - GTM (Basic)</h1>
+
+    <script defer type="module" src="/src/index.tsx"></script>
+    <script>
+      window.leckerliSettings = {
+          name: 'leckerli-gtm-basic',
+          enableGtmConsent: true,
+          permissions: [
+              {
+                  slug: 'settings',
+                  title: 'Custom Preferences',
+                  description:
+                      'Preference cookies enable a website to remember information that changes the way the website behaves or looks, like your preferred language or the region that you are in.',
+              },
+              {
+                  slug: 'ad_storage',
+                  title: 'Publicités',
+                  description: "Le stockage d'annonces concerne l'utilisation de cookies pour stocker des données liées aux annonces présentées à l'utilisateur, y compris le suivi des interactions et des préférences de l'utilisateur."
+              },
+              {
+                  slug: 'analytics_storage',
+                  title: 'Analytics',
+                  description: "Le stockage analytique fait référence à l'utilisation de cookies pour stocker des données relatives à l'utilisation du site, permettant une analyse d'utilisation du site complète pour améliorer le site Web."
+              },
+              {
+                  slug: 'personalization_storage',
+                  title: 'Personnalisation',
+                  description: "Le stockage de personnalisation implique l'utilisation de cookies pour stocker les préférences de l'utilisateur et d'autres informations afin de personnaliser et d'améliorer l'expérience utilisateur sur le site Web."
+              },
+          ]
+      }
+
+
+    </script>
+    <script>
+      // To listen the initialisation
+      document.addEventListener('leckerli:initialised', (event) => {
+        // to get cookie data OR null if the user's choice has not been made
+        console.log('init', event.detail.cookie);
+      });
+
+      // To listen to the permissions / cookie's updates
+      document.addEventListener('leckerli:permissions-updated', (event) => {
+        // to get cookie data
+        console.log('update', event.detail.cookie);
+      });
+
+      // To listen the modal states
+      document.addEventListener('leckerli:modal-opened', () => {
+        // react to modal opened
+        console.log('modal opened')
+      });
+      document.addEventListener('leckerli:modal-closed', () => {
+        // react to modal closed
+        console.log('modal closed')
+      });
+    </script>
+
+    <style>
+      /*
+      :root {
+        --leckerli-foreground: #fff;
+        --leckerli-background: #000;
+        --leckerli-primary: #ff0099;
+        --leckerli-primary-hover: #d1007e;
+        --leckerli-primary-active: #9D005F;
+        --leckerli-font: sans-serif;
+      }
+     */
+    </style>
+  </body>
+</html>