chore: get rid of ember-cli-google-analytics & use custom code (#114)

* chore: get rid of ember-cli-google-analytics & use custom code * chore: remove counter service & related code * fix gtag loading (get rid of async) * try wait a little bit more for visual testing
romgere · Oct 24, 2023 · 1219936 · 1219936
1 parent 9c1d6bb
commit 1219936
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 168 deletions.
diff --git a/app/config/environment.d.ts b/app/config/environment.d.ts
@@ -12,6 +12,10 @@ declare const config: {
   podModulePrefix: string;
   locationType: string;
   rootURL: string;
+  gTag: {
+    tag: string;
+    forceEnable: true | undefined;
+  };
   APP: Record<string, unknown> & {
     textMakerDefault: {
       fontName: string;

diff --git a/app/controllers/app/generator.ts b/app/controllers/app/generator.ts
@@ -4,7 +4,6 @@ import { inject as service } from '@ember/service';
 import FontManagerService from 'text2stl/services/font-manager';
 import TextMakerService from 'text2stl/services/text-maker';
 import STLExporterService from 'text2stl/services/stl-exporter';
-// import CounterService from 'text2stl/services/counter';
 import { tracked } from '@glimmer/tracking';
 import { trackedFunction } from 'ember-resources/util/function';
 import { Registry as Services } from '@ember/service';
@@ -34,17 +33,11 @@ export default class GeneratorController extends Controller {
 
   @service declare intl: IntlService;
 
-  @service declare gtag: GTagService;
-
-  // @service('counter') declare counterService: CounterService;
-
   @service declare router: Services['router'];
 
-  declare model: RouteModel<ApplicationRoute>;
+  _gtag = gtag;
 
-  // get counter() {
-  //   return this.counterService.counter;
-  // }
+  declare model: RouteModel<ApplicationRoute>;
 
   font = trackedFunction(this, async () => {
     return this.model.customFont
@@ -54,7 +47,7 @@ export default class GeneratorController extends Controller {
 
   mesh = trackedFunction(this, () => {
     if (this.font.isResolved && this.font.value) {
-      this.gtag.event('stl_generation', {
+      this._gtag('event', 'stl_generation', {
         event_category: 'stl', // eslint-disable-line camelcase
         value: this.model.type,
       });
@@ -83,12 +76,11 @@ export default class GeneratorController extends Controller {
       return;
     }
 
-    this.gtag.event('stl_download', {
+    this._gtag('event', 'stl_download', {
       event_category: 'stl', // eslint-disable-line camelcase
       value: this.model.type,
     });
 
-    // this.counterService.updateCounter();
     this.stlExporter.downloadMeshAsSTL(mesh);
   }
 

diff --git a/app/initializers/gtag.ts b/app/initializers/gtag.ts
@@ -0,0 +1,34 @@
+import config from 'text2stl/config/environment';
+const { gTag, environment } = config;
+
+export function initialize() {
+  if (!gTag.forceEnable && ['development', 'test'].includes(environment)) {
+    return;
+  }
+
+  injectGtag();
+  initGtag();
+}
+
+async function injectGtag() {
+  const script = document.createElement('script');
+  script.setAttribute('src', `https://www.googletagmanager.com/gtag/js?id=${gTag.tag}`);
+  document.body.appendChild(script);
+}
+
+function initGtag() {
+  const script = document.createElement('script');
+  script.innerHTML = `
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '${gTag.tag}');
+`;
+
+  // Append the script tag to the document.
+  document.body.appendChild(script);
+}
+
+export default {
+  initialize,
+};
diff --git a/app/services/counter.ts b/app/services/counter.ts
diff --git a/app/templates/app/generator.hbs b/app/templates/app/generator.hbs
@@ -42,14 +42,6 @@
   >
 
     <div slot="footer">
-      {{!-- {{#if this.counter}}
-        <calcite-notice open icon="information">
-          <div slot="message">
-            {{t 'stl_counter' count=this.counter}}
-          </div>
-        </calcite-notice>
-      {{/if}} --}}
-
       <calcite-button
         width="full"
         scale="l"

diff --git a/config/environment.js b/config/environment.js
@@ -14,6 +14,11 @@ module.exports = function (environment) {
       },
     },
 
+    gTag: {
+      tag: 'G-47QBQ5GB3Y',
+      forceEnable: true,
+    },
+
     'ember-toggle': {
       includedThemes: ['default'],
     },
@@ -73,13 +78,6 @@ module.exports = function (environment) {
             : process.env.COUNTAPI_API_KEY,
       },
     },
-
-    'ember-cli-google': {
-      analytics: {
-        version: 'v4',
-        measurementId: 'G-47QBQ5GB3Y',
-      },
-    },
   };
 
   if (environment === 'development') {

diff --git a/package.json b/package.json
@@ -40,7 +40,6 @@
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@glint/template": "1",
-    "@onehilltech/ember-cli-google-analytics": "^1.5.0",
     "@percy/cli": "^1.27.3",
     "@percy/ember": "^4.2.0",
     "@types/ember__application": "^~4.0",

diff --git a/tests/acceptance/visual-test.ts b/tests/acceptance/visual-test.ts
@@ -7,6 +7,7 @@ import percySnapshot from '@percy/ember';
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import mockFontManager from 'text2stl/tests/helpers/mock-font-manager';
 import waitCalciteReady from 'text2stl/tests/helpers/wait-calcite-ready';
+import wait from 'text2stl/tests/helpers/wait';
 
 module('Acceptance | visual', function (hooks) {
   setupApplicationTest(hooks);
@@ -23,6 +24,7 @@ module('Acceptance | visual', function (hooks) {
       await visit(`/en-us/generator?modelSettings=${settingsQP}`);
       await waitCalciteReady();
       await waitFor('[data-test-export-stl]:not([loading])');
+      await wait(250);
       await percySnapshot(`visual test #${testIdx + 1}`);
       assert.true(true);
     });

diff --git a/tests/unit/controllers/app/generator-test.ts b/tests/unit/controllers/app/generator-test.ts
@@ -106,10 +106,9 @@ module('Unit | Controller | app/generator', function (hooks) {
       assert.strictEqual(mesh, mockedMesh, 'it generates STL from mesh');
     };
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.owner.lookup('service:gtag').event = function (eventName: string, opts: any) {
-      assert.step(`gtag_event_${eventName}_${opts.value}`);
-    };
+    controller._gtag = function (type: string, eventName: string, opts: { value: string }) {
+      assert.step(`gtag_${type}_${eventName}_${opts.value}`);
+    } as unknown as typeof gtag;
 
     // Wait for the font to be load
     await waitUntil(() => controller.font.isResolved);

diff --git a/tests/unit/services/counter-test.ts b/tests/unit/services/counter-test.ts
diff --git a/types/text2stl/index.d.ts b/types/text2stl/index.d.ts
@@ -1,23 +1,11 @@
 import Route from '@ember/routing/route';
-import Service from '@ember/service';
 
 declare global {
   // interface Array<T> extends Ember.ArrayPrototypeExtensions<T> {}
   // interface Function extends Ember.FunctionPrototypeExtensions {}
 
   type Resolved<P> = P extends Promise<infer T> ? T : P;
   export type RouteModel<R extends Route> = Resolved<ReturnType<R['model']>>;
-
-  export type GTagService = Service & {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    event(name: string, data: any): void;
-  };
-}
-
-declare module '@ember/service' {
-  interface Registry {
-    gtag: GTagService;
-  }
 }
 
 export {};
diff --git a/yarn.lock b/yarn.lock
@@ -1531,15 +1531,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@onehilltech/ember-cli-google-analytics@^1.5.0":
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/@onehilltech/ember-cli-google-analytics/-/ember-cli-google-analytics-1.5.0.tgz#19d576fc6db5f9088fe91598a61ed545c3c360fe"
-  integrity sha512-vILQX6bxCuoYem2fi0uYWPQHCx2aSOJECedDAJinX7q4dopJr+Fy4D3RJqClOOpzP28CZ47SI58v9pGF5rXl5g==
-  dependencies:
-    ember-cli-babel "^7.26.10"
-    ember-cli-blueprint-helpers "^0.4.8"
-    ember-cli-htmlbars "^5.7.2"
-
 "@percy/[email protected]":
   version "1.27.3"
   resolved "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.27.3.tgz#c296e09ffac46c011e9f33ac779d6f0396e0b2b6"
@@ -3210,13 +3201,6 @@ balanced-match@^2.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
-base-object@^1.2.1:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/base-object/-/base-object-1.4.1.tgz#e821b486ada5f1bef0bea460ba7c064fc4c21f69"
-  integrity sha512-oAb97VZZfoCmk3CJbEQuRtnQqgP5/Hnog0vtju9mZPOu/ez8ZB78OsZfFQIwRoUTPxE+5l1sD9X8Ou/3HPraNA==
-  dependencies:
-    lodash "^4.17.10"
-
 base64-js@^1.0.2, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -3288,7 +3272,7 @@ blank-object@^1.0.1:
   resolved "https://registry.npmjs.org/blank-object/-/blank-object-1.0.2.tgz#f990793fbe9a8c8dd013fb3219420bec81d5f4b9"
   integrity sha512-kXQ19Xhoghiyw66CUiGypnuRpWlbHAzY/+NyvqTEdTfhfQGH1/dbEMYiXju7fYKIFePpzp/y9dsu5Cu/PkmawQ==
 
-bluebird@^3.4.6, bluebird@^3.5.1, bluebird@^3.5.5, bluebird@^3.7.2:
+bluebird@^3.4.6, bluebird@^3.5.5, bluebird@^3.7.2:
   version "3.7.2"
   resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -5263,18 +5247,6 @@ ember-cli-babel@^7.0.0, ember-cli-babel@^7.13.0, ember-cli-babel@^7.22.1, ember-
     rimraf "^3.0.1"
     semver "^5.5.0"
 
-ember-cli-blueprint-helpers@^0.4.8:
-  version "0.4.8"
-  resolved "https://registry.npmjs.org/ember-cli-blueprint-helpers/-/ember-cli-blueprint-helpers-0.4.8.tgz#dfec3a876466247ac9a025babdea8e06fb3b77f4"
-  integrity sha512-oEhxc0IXNCxpNI2mPGYxwWOfxsD+HollaZTJa+JHELhByYZ1lCiGmbiRPLWA8QF3UjYxoPeR+7Pol5pHtaAweg==
-  dependencies:
-    base-object "^1.2.1"
-    bluebird "^3.5.1"
-    core-object "^3.1.5"
-    execa "^1.0.0"
-    fs-extra "^7.0.0"
-    semver "^5.5.1"
-
 ember-cli-bundle-analyzer@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/ember-cli-bundle-analyzer/-/ember-cli-bundle-analyzer-0.2.2.tgz#09b33585147b684fe675c554bd83d45fbc164526"
@@ -8890,7 +8862,7 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
   integrity sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==
 
-lodash@^4.17.10, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4:
+lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -11036,7 +11008,7 @@ schema-utils@^4.0.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.1.0"
 
-semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.1:
+semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
   version "5.7.2"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==