@voilabs/plugins 0.0.1-beta.0 → 0.0.1-beta.1

package/github-examples/google-tag-manager/assets/admin.css

@@ -0,0 +1,27 @@
+.voilabs-gtm-panel {
+  display: grid;
+  gap: 8px;
+  color: #17202a;
+  font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.voilabs-gtm-panel h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.voilabs-gtm-panel p,
+.voilabs-gtm-panel ul {
+  margin: 0;
+}
+
+.voilabs-gtm-card {
+  display: grid;
+  gap: 6px;
+  color: #17202a;
+  font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.voilabs-gtm-card strong {
+  font-size: 15px;
+}

package/github-examples/google-tag-manager/components/dashboard-card.js

@@ -0,0 +1,10 @@
+export default function GoogleTagManagerDashboardCard(props) {
+  const h = props.React.createElement;
+
+  return h(
+    "article",
+    { className: "voilabs-gtm-card" },
+    h("strong", null, props.plugin.name),
+    h("span", null, "Public analytics injection is managed by this plugin."),
+  );
+}

package/github-examples/google-tag-manager/components/settings.js

@@ -0,0 +1,21 @@
+export default function GoogleTagManagerSettings(props) {
+  const h = props.React.createElement;
+
+  return h(
+    "section",
+    { className: "voilabs-gtm-panel" },
+    h("h3", null, "Google Tag Manager"),
+    h(
+      "p",
+      null,
+      "Enter a GTM container ID such as GTM-ABC123. The plugin injects the head script and body noscript tag after it is installed and enabled.",
+    ),
+    h(
+      "ul",
+      null,
+      h("li", null, "Container ID is validated with the GTM- prefix."),
+      h("li", null, "dataLayer is used by default."),
+      h("li", null, "The public injections run only on public pages."),
+    ),
+  );
+}

package/github-examples/google-tag-manager/schema.json

@@ -0,0 +1,139 @@
+{
+  "id": "google-tag-manager",
+  "name": "Google Tag Manager",
+  "summary": "Inject a Google Tag Manager container into public pages.",
+  "description": "Adds the GTM bootstrap script to the document head and the noscript iframe to the start of the body.",
+  "version": "1.0.0",
+  "category": "analytics",
+  "badge": "GTM",
+  "docsUrl": "https://developers.google.com/tag-platform/tag-manager",
+  "tags": ["analytics", "marketing", "tracking", "google"],
+  "needEncryption": false,
+  "fields": [
+    {
+      "key": "containerId",
+      "label": "Container ID",
+      "description": "Your GTM container identifier, for example GTM-ABC123.",
+      "type": "text",
+      "placeholder": "GTM-ABC123",
+      "required": true,
+      "pattern": "^GTM-[A-Z0-9]+$"
+    },
+    {
+      "key": "dataLayerName",
+      "label": "Data Layer Name",
+      "description": "Use dataLayer unless your GTM container was configured with a custom data layer name.",
+      "type": "text",
+      "placeholder": "dataLayer",
+      "required": true,
+      "defaultValue": "dataLayer",
+      "pattern": "^[a-zA-Z_$][a-zA-Z0-9_$]*$"
+    }
+  ],
+  "frontend": {
+    "components": [
+      {
+        "key": "gtm-settings-panel",
+        "slot": "settings-panel",
+        "label": "Google Tag Manager settings",
+        "description": "Shows guidance for the GTM configuration form.",
+        "component": {
+          "type": "remote",
+          "path": "components/settings.js"
+        },
+        "order": 20
+      },
+      {
+        "key": "gtm-dashboard-card",
+        "slot": "dashboard-card",
+        "label": "Google Tag Manager",
+        "component": {
+          "type": "remote",
+          "path": "components/dashboard-card.js"
+        },
+        "order": 30
+      }
+    ]
+  },
+  "routes": [
+    {
+      "id": "gtm-status",
+      "method": "GET",
+      "path": "/status",
+      "summary": "Returns the configured GTM container.",
+      "requiresInstallation": true,
+      "requiresEnabled": true,
+      "response": {
+        "status": 200,
+        "body": {
+          "ok": true,
+          "containerId": "{{config.containerId}}",
+          "dataLayerName": "{{config.dataLayerName}}"
+        }
+      }
+    }
+  ],
+  "additionalMetaTags": [
+    {
+      "key": "voilabs-plugin-gtm",
+      "name": "voilabs-plugin",
+      "content": "google-tag-manager"
+    }
+  ],
+  "injections": [
+    {
+      "key": "gtm-admin-style",
+      "type": "style",
+      "placement": "admin:head",
+      "src": "assets/admin.css",
+      "condition": {
+        "area": "admin"
+      },
+      "order": 5
+    },
+    {
+      "key": "gtm-head-bootstrap",
+      "type": "script",
+      "placement": "public:head",
+      "condition": {
+        "area": "public"
+      },
+      "order": 10,
+      "content": "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':Date.now(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+encodeURIComponent(i)+(l==='dataLayer'?'':'&l='+encodeURIComponent(l));f.parentNode.insertBefore(j,f);})(window,document,'script','{{config.dataLayerName}}','{{config.containerId}}');"
+    },
+    {
+      "key": "gtm-body-noscript",
+      "type": "noscript",
+      "placement": "body:start",
+      "condition": {
+        "area": "public"
+      },
+      "order": 11,
+      "content": "<iframe src=\"https://www.googletagmanager.com/ns.html?id={{config.containerId}}\" height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe>"
+    }
+  ],
+  "assets": [
+    {
+      "key": "gtm-admin-css",
+      "type": "style",
+      "url": "assets/admin.css"
+    }
+  ],
+  "permissions": [
+    {
+      "key": "inject-public-html",
+      "label": "Inject public HTML",
+      "description": "Allows this plugin to add GTM tags to public pages.",
+      "default": true
+    }
+  ],
+  "compatibility": {
+    "node": ">=18",
+    "next": ">=13",
+    "react": ">=18",
+    "elysia": ">=1"
+  },
+  "support": {
+    "docs": "https://developers.google.com/tag-platform/tag-manager"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@voilabs/plugins",
-    "version": "0.0.1-beta.0",
+    "version": "0.0.1-beta.1",
     "description": "Framework-agnostic plugin registry and runtime for Node.js, Next.js, Elysia and React apps.",
     "type": "module",
     "main": "./dist/index.js",
@@ -38,6 +38,7 @@
     },
     "files": [
         "dist",
+        "github-examples",
         "README.md"
     ],
     "sideEffects": false,