Initial commit

Author: IlCallo

.gitignore

@@ -0,0 +1,16 @@
+.DS_Store
+.thumbs.db
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+dist

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Dreamonkey S.r.l.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,60 @@
+# @dreamonkey/quasar-app-extension-tracking
+
+This is a [Quasar App Extension (AE)](https://quasar.dev/app-extensions/introduction#Introduction)
+It provides composables for many commonly used tracking scripts using [Quasar Meta Composable](https://quasar.dev/vue-composables/use-meta).
+
+- Google Tag Manager -> `useGoogleTagManager`
+- Facebook Pixel -> `useFacebookPixel`
+- Linkedin Insight Tag -> `useLinkedinInsightTag`
+
+We'll gladly accept other contributions.
+
+# Install
+
+```bash
+quasar ext add @dreamonkey/tracking
+```
+
+# Uninstall
+
+```bash
+quasar ext remove @dreamonkey/tracking
+```
+
+# Usage
+
+Composables are meant to be placed into your layout components, as you usually want them to be triggered each time a user land on any of your pages.
+All composables accept an id/key, either as a plain string or as a ref.
+When using a ref, the script won't be added when its value is an empty string, undefined or any falsy value.
+
+```ts
+// src/layouts/main-layout.vue
+
+import {
+  useGoogleTagManager,
+  useLinkedinInsightTag,
+} from "@dreamonkey/quasar-app-extension-tracking";
+
+export default {
+  name: "MainLayout",
+  setup() {
+    // Add Google Tag Manager script
+    useGoogleTagManager("GTM-XXXXXXX");
+
+    const linkedinId = ref();
+    // Won't add the Linkedin Insight Tag script since the provided ref has undefined value
+    useLinkedinInsightTag(linkedinId);
+
+    // Tracking AE will react to the change and add Linkedin Insight Tag script
+    linkedinId.value = "XXXXXXX";
+  },
+};
+```
+
+# Similar work
+
+- https://github.com/gtm-support/vue-gtm: much more complete on GTM side, we may copy over some features at some point
+
+# Donate
+
+If you appreciate the work that went into this App Extension, please consider [donating to Dreamonkey](https://github.com/sponsors/dreamonkey).

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dreamonkey/quasar-app-extension-tracking",
+  "version": "0.1.0",
+  "description": "Provide composables to add multiple tracking scripts via Quasar Meta plugin",
+  "keywords": [
+    "quasar",
+    "tracking",
+    "facebook",
+    "pixel",
+    "google",
+    "analytics",
+    "tag manager",
+    "linkedin",
+    "insight tag"
+  ],
+  "author": "Paolo Caleffi <p.caleffi@dreamonkey.com>",
+  "license": "MIT",
+  "main": "dist/exports.js",
+  "types": "dist/exports.d.ts",
+  "scripts": {
+    "build": "rimraf dist && tsc --declaration",
+    "install-build-clean": "yarn install && yarn build && rimraf node_modules",
+    "test": "echo \"No test specified\" && exit 0",
+    "deploy": "yarn build && yarn publish --tag latest"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dreamonkey/quasar-app-extension-tracking"
+  },
+  "bugs": "https://github.com/dreamonkey/quasar-app-extension-tracking/issues",
+  "homepage": "",
+  "devDependencies": {
+    "@babel/types": "^7.15.6",
+    "@types/node": "^12.20.27",
+    "quasar": "^2.6.6",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.6.4",
+    "vue": "^3.2.33"
+  },
+  "peerDependencies": {
+    "quasar": "^2.0.0",
+    "vue": "^3.2.0"
+  },
+  "engines": {
+    "node": ">= 12.2.0",
+    "npm": ">= 5.6.0",
+    "yarn": ">= 1.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

src/exports.ts

@@ -0,0 +1,3 @@
+export * from "./google";
+export * from "./linkedin";
+export * from "./facebook";

src/facebook.ts

@@ -0,0 +1,24 @@
+import { TrackingId, useTrackingMeta } from "./shared";
+
+export function useFacebookPixel(maybeId: TrackingId) {
+  useTrackingMeta(maybeId, (id) => ({
+    script: {
+      facebookPixel: {
+        type: "text/javascript",
+        innerHTML: `!function(f,b,e,v,n,t,s)
+        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+        n.queue=[];t=b.createElement(e);t.async=!0;
+        t.src=v;s=b.getElementsByTagName(e)[0];
+        s.parentNode.insertBefore(t,s)}(window,document,'script',
+        'https://connect.facebook.net/en_US/fbevents.js');
+        fbq('init', '${id}'); 
+        fbq('track', 'PageView');`,
+      },
+    },
+    noscript: {
+      facebookPixel: `<img height="1" width="1" src="https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1"/>`,
+    },
+  }));
+}

src/google.ts

@@ -0,0 +1,22 @@
+import { TrackingId, useTrackingMeta } from "./shared";
+
+export function useGoogleTagManager(maybeId: TrackingId) {
+  useTrackingMeta(maybeId, (id) => ({
+    script: {
+      googleTagManager: {
+        type: "text/javascript",
+        innerHTML: `(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','${id}');
+          `,
+      },
+    },
+    noscript: {
+      googleTagManager: `
+        <iframe src="https://www.googletagmanager.com/ns.html?id=${id}"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+    },
+  }));
+}

src/index.js

@@ -0,0 +1,16 @@
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
+ * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js
+ */
+
+module.exports = function (api) {
+  api.extendQuasarConf((conf) => {
+    conf.framework.plugins.push("Meta");
+    conf.build.transpileDependencies.push(
+      /@dreamonkey[\\/]quasar-app-extension-tracking/
+    );
+  });
+};

src/linkedin.ts

@@ -0,0 +1,21 @@
+import { TrackingId, useTrackingMeta } from "./shared";
+
+export function useLinkedinInsightTag(maybeId: TrackingId) {
+  useTrackingMeta(maybeId, (id) => ({
+    script: {
+      linkedinInsightTag: {
+        type: "text/javascript",
+        innerHTML: `window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
+        window._linkedin_data_partner_ids.push(${id});
+        (function(){var s = document.getElementsByTagName("script")[0];
+        var b = document.createElement("script");
+        b.type = "text/javascript";b.async = true;
+        b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
+        s.parentNode.insertBefore(b, s);})();`,
+      },
+    },
+    noscript: {
+      linkedinInsightTag: `<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=${id}&fmt=gif" />`,
+    },
+  }));
+}

src/shared.ts

@@ -0,0 +1,19 @@
+import { useMeta } from "quasar";
+import { MetaOptions } from "quasar/dist/types/meta";
+import { Ref, unref } from "vue";
+
+export type TrackingId = string | Ref<string | undefined>;
+
+export function useTrackingMeta(
+  maybeId: TrackingId,
+  metaOptionsFn: (id: string) => MetaOptions
+): void {
+  useMeta(() => {
+    const id = unref(maybeId);
+    if (!id) {
+      return {};
+    }
+
+    return metaOptionsFn(id);
+  });
+}