显示ad图片，接入点击统计

cc-inspector/src/ga/type.ts

@@ -78,6 +78,14 @@ export enum GA_EventName {
   Hierarchy = "hierarchy",
   Inspector = "Inspector",
   EngineVersion = "engine_version",
+  /**
+   * 用户点击store广告链接
+   */
+  ClickPluginLink = "click_plugin_link",
+  /**
+   * 用户主动关闭store广告
+   */
+  CloseAd = "close_ad",
 }
 export enum GA_Button {
   Github = "github",

cc-inspector/src/scripts/const.ts

@@ -1,3 +1,5 @@
+import { GA_EventName } from "../ga/type";
+
 export enum DocumentEvent {
   /**
    * 从inject到content的事件
@@ -8,4 +10,9 @@ export enum DocumentEvent {
    */
   Content2Inject = "content2inject",
   EngineVersion = "engineVersion",
+  GoogleAnalytics = "googleAnalytics",
+}
+export interface GoogleAnalyticsData {
+  event: GA_EventName;
+  params: string;
 }

cc-inspector/src/scripts/content/index.ts

@@ -4,7 +4,7 @@ import { ChromeConst } from "cc-plugin/src/chrome/const";
 import { debugLog, Page, PluginEvent } from "../../core/types";
 import { ga } from "../../ga";
 import { GA_EventName } from "../../ga/type";
-import { DocumentEvent } from "../const";
+import { DocumentEvent, GoogleAnalyticsData } from "../const";
 import { Terminal } from "../terminal";
 
 const terminal = new Terminal(Page.Content);
@@ -33,6 +33,16 @@ document.addEventListener(DocumentEvent.EngineVersion, async (event: CustomEvent
     ga.fireEventWithParam(GA_EventName.EngineVersion, version);
   }
 });
+document.addEventListener(DocumentEvent.GoogleAnalytics, (event: CustomEvent) => {
+  const data: GoogleAnalyticsData = event.detail;
+  if (data && data.event) {
+    if (data.params) {
+      ga.fireEventWithParam(data.event, data.params);
+    } else {
+      ga.fireEvent(data.event);
+    }
+  }
+});
 // #region 和Inject通讯
 document.addEventListener(DocumentEvent.Inject2Content, (event: CustomEvent) => {
   let data: PluginEvent = PluginEvent.create(event.detail);

cc-inspector/src/scripts/inject-view/app.vue

@@ -25,6 +25,8 @@ import { defineComponent, onMounted, ref, toRaw } from "vue";
 import Banner from "./banner.vue";
 import { emitter, Msg } from "./const";
 import { AdItem, getAdData } from "./loader";
+import { ga } from "./util";
+import { GA_EventName } from "../../ga/type";
 export default defineComponent({
   name: "ad",
   components: { Banner },
@@ -80,6 +82,7 @@ export default defineComponent({
       ads,
       onClose() {
         isShow.value = false;
+        ga(GA_EventName.CloseAd);
       },
       onMouseEnter() {
         stopAutoScroll = true;

cc-inspector/src/scripts/inject-view/banner.vue

@@ -1,12 +1,18 @@
 <template>
-  <div v-if="data" class="banner" :class="ani" @click="onClick" :title="data.tip">
+  <div v-if="data" class="banner" :class="ani" @click="onClick" :title="data.tip" :style="getStyle()">
-    <div class="text">{{ data.name }}</div>
+    <div class="text">
+      <span>
+        {{ data.name }}
+      </span>
+    </div>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, PropType, ref } from "vue";
+import { defineComponent, onMounted, onUnmounted, PropType, ref, toRaw } from "vue";
+import { GA_EventName } from "../../ga/type";
 import { emitter, Msg } from "./const";
 import { AdItem } from "./loader";
+import { ga } from "./util";
 export default defineComponent({
   name: "banner",
   props: {
@@ -29,9 +35,19 @@ export default defineComponent({
     const ani = ref("");
     return {
       ani,
+      getStyle() {
+        const img = props.data.img;
+        if (img) {
+          return `background-image: url(${img})`;
+        } else {
+          return "";
+        }
+      },
       onClick() {
-        if (props.data.store) {
+        const url = toRaw(props.data.store);
-          window.open(props.data.store);
+        if (url) {
+          window.open(url);
+          ga(GA_EventName.ClickPluginLink, url);
         }
       },
     };
@@ -63,7 +79,8 @@ export default defineComponent({
   animation: flip-in 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
 }
 .banner {
-  border: 2px solid #ffffff;
+  border: 2px solid #d2d2d2;
+  border-bottom: 0;
   background-color: #ffffff;
   overflow: hidden;
   min-width: 300px;
@@ -72,11 +89,11 @@ export default defineComponent({
   max-height: 50px;
   cursor: pointer;
   display: flex;
-  border: 2px solid #d2d2d2;
   text-align: center;
   align-items: flex-end;
   &:hover {
-    border: 2px solid #d1d1d1;
+    border: 2px solid #949494;
+    border-bottom: 0;
     background-color: #d1d1d1;
   }
   .text {
@@ -86,7 +103,17 @@ export default defineComponent({
     font-size: 13px;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: wrap;
+    white-space: nowrap;
+    span {
+      color: #000000c4;
+      background-color: #afafaf6b;
+      padding: 1px 4px;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 </style>

cc-inspector/src/scripts/inject-view/github.ts

@@ -59,7 +59,10 @@ export class GithubMirror {
     this.time = cfg.getTime(name);
     this.calcUrl = cb;
   }
-  private getUrl(file: string) {
+  public getUrl(file: string) {
+    if (!file) {
+      return "";
+    }
     if (this.calcUrl) {
       return this.calcUrl(this.owner, this.repo, this.branch, file);
     } else {
@@ -142,5 +145,13 @@ export class GithubMirrorMgr {
     }
     return null;
   }
+  getFileUrl(file: string): string {
+    if (!file) {
+      return "";
+    }
+    this.mirrors.sort((a, b) => b.time - a.time);
+    const url = this.mirrors[0].getUrl(file);
+    return url;
+  }
 }
 export const githubMirrorMgr = new GithubMirrorMgr();

cc-inspector/src/scripts/inject-view/loader.ts

@@ -36,7 +36,8 @@ export class AdItem {
     this.tip = data.tip || "";
     this.duration = data.duration || 0;
     this.valid = !!data.valid;
-    this.img = data.img || "";
+    const img = data.img || "";
+    this.img = githubMirrorMgr.getFileUrl(img);
     return this;
   }
 }

cc-inspector/src/scripts/inject-view/util.ts

@@ -0,0 +1,8 @@
+import { GA_EventName } from "../../ga/type";
+import { DocumentEvent, GoogleAnalyticsData } from "../const";
+
+export function ga(event: GA_EventName, params: string = "") {
+  const detail = { event, params } as GoogleAnalyticsData;
+  const e = new CustomEvent(DocumentEvent.GoogleAnalytics, { detail });
+  document.dispatchEvent(e);
+}