Merge pull request #82 from getamis/ASL-4736/custom-track-settings

[ASL-4736] custom track settings
getamis · Nov 6, 2023 · 88ffe37 · 88ffe37
2 parents bb996cc + 69543fe
commit 88ffe37
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,6 @@ const qubicConnect = QubicConnect.initialize({
   name: 'Display Name', // will show up in display
   key: 'API_KEY',
   secret: 'API_SECRET',
-  enableAutoLoginInWalletIab: false // default true, it will auto login when url opened in Wallet dApp Browser which provides window.ethereum
 });
 </script>
 ```
@@ -88,6 +87,8 @@ const qubicConnect = new QubicConnect({
   name: 'Display Name', // will show up in display
   key: 'API_KEY',
   secret: 'API_SECRET',
+  enableAutoLoginInWalletIab: false // default true, it will auto login when url opened in Wallet dApp Browser which provides window.ethereum
+  trackGaSettings: [] // default: [], put measurement ids here to track addPaymentInfo event
 });
 ```
 

diff --git a/examples/example-pure-js/public/index.html b/examples/example-pure-js/public/index.html
@@ -22,6 +22,16 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Qubic Connect JS SDK Example</title>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-W8EB8ZK5CV"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-W8EB8ZK5CV');
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/examples/example-pure-js/src/gqlSchema/assets.ts b/examples/example-pure-js/src/gqlSchema/assets.ts
@@ -15,7 +15,7 @@ export const GET_ASSET_DETAIL = gql`
           expiresDays
         }
         salePhases {
-          mode
+          saleMode
         }
         variants(privateSaleCode: $privateSaleCode) {
           id
@@ -53,7 +53,7 @@ export interface AssetDetail {
       expiredDays: string;
     } | null;
     salePhases: {
-      mode: string;
+      saleMode: string;
     };
     variants: Array<AssetVariant>;
   };

diff --git a/examples/example-pure-js/src/index.ts b/examples/example-pure-js/src/index.ts
@@ -56,6 +56,7 @@ async function main() {
     authRedirectUrl: AUTH_REDIRECT_URL, // optional, for debug
     iabRedirectUrl: '', // optional
     shouldAlwaysShowCopyUI: false, // optional
+    trackGaSettings: ['G-W8EB8ZK5CV'],
     providerOptions: {
       qubic: {
         provider: new QubicProvider({

diff --git a/packages/core/src/QubicConnect.ts b/packages/core/src/QubicConnect.ts
@@ -32,6 +32,7 @@ import { buyAsset, AssetBuyResponse, giftRedeem, GiftRedeemResponse } from './ap
 import { addLocaleToUrl } from './utils/addLocaleToUrl';
 import { clientTicketIssue } from './api/clientTicket';
 import { PASS_URL, WALLET_URL } from './constants/config';
+import { addTrackSettingsToUrl, initGaTrack } from './utils/addTrackSettingsToUrl';
 
 const DEFAULT_SERVICE_NAME = 'qubic-creator';
 
@@ -105,6 +106,7 @@ export class QubicConnect {
       shouldAlwaysShowCopyUI = false,
       disableOpenExternalBrowserWhenLineIab = false,
       enableAutoLoginInWalletIab = true,
+      trackGaSettings = [],
     } = config;
     if (!apiKey) {
       throw Error('new QubicConnect should have key');
@@ -126,6 +128,7 @@ export class QubicConnect {
       shouldAlwaysShowCopyUI,
       disableOpenExternalBrowserWhenLineIab,
       enableAutoLoginInWalletIab,
+      trackGaSettings,
     };
 
     QubicConnect.checkProviderOptions(config?.providerOptions);
@@ -168,6 +171,7 @@ export class QubicConnect {
     this.handleRedirectResult();
     this.hydrateUser();
     this.onAuthStateChanged(QubicConnect.persistUser);
+    initGaTrack(this.config.trackGaSettings);
 
     if (!this.user && this.shouldAutoLoginInWalletIab) {
       this.loginWithWallet(window.ethereum.isQubic ? 'qubic' : 'metamask');
@@ -595,6 +599,7 @@ export class QubicConnect {
       if (options?.locale) {
         paymentUrl = addLocaleToUrl(response.assetBuy.paymentUrl, options.locale);
       }
+      paymentUrl = addTrackSettingsToUrl(paymentUrl);
 
       return {
         ...response,
@@ -625,6 +630,7 @@ export class QubicConnect {
       if (options?.locale) {
         paymentUrl = addLocaleToUrl(response.giftRedeem.paymentUrl, options.locale);
       }
+      paymentUrl = addTrackSettingsToUrl(paymentUrl);
 
       return {
         ...response,

diff --git a/packages/core/src/types/QubicConnectConfig.ts b/packages/core/src/types/QubicConnectConfig.ts
@@ -15,6 +15,8 @@ export interface QubicConnectConfig {
   disableOpenExternalBrowserWhenLineIab?: boolean;
   enableAutoLoginInWalletIab?: boolean;
 
+  trackGaSettings?: Array<string>;
+
   // # fast login
   // authRedirectUrl where have different type of wallet
   authRedirectUrl?: string;

diff --git a/packages/core/src/utils/addTrackSettingsToUrl.ts b/packages/core/src/utils/addTrackSettingsToUrl.ts
@@ -0,0 +1,58 @@
+const { gtag } = window as any;
+
+function getClientId(tagId: string): Promise<string> {
+  return new Promise(resolve => {
+    if (!gtag) resolve('');
+
+    gtag('get', tagId, 'client_id', (clientId: string) => {
+      resolve(clientId);
+    });
+  });
+}
+
+function getSessionId(tagId: string): Promise<string> {
+  return new Promise(resolve => {
+    if (!gtag) resolve('');
+    gtag('get', tagId, 'session_id', (sessionId: string) => {
+      resolve(sessionId);
+    });
+  });
+}
+
+let cachedGaTrackSettings: string[] = [];
+export async function initGaTrack(measurementIds: string[]): Promise<void> {
+  if (!gtag && measurementIds.length > 0) {
+    console.warn('window.gtag not found, you should set up gtag in current web to use this function');
+    return;
+  }
+  cachedGaTrackSettings = (
+    await Promise.all(
+      measurementIds.map(async measurementId => {
+        const clientId = await getClientId(measurementId);
+        const sessionId = await getSessionId(measurementId);
+        if (!clientId) {
+          console.error('clientId not found');
+          return '';
+        }
+        if (!sessionId) {
+          console.error('sessionId not found');
+          return '';
+        }
+        return `${measurementId},${clientId},${sessionId}`;
+      }),
+    )
+  ).filter(item => !!item);
+}
+
+export function addTrackSettingsToUrl(url: string): string {
+  const paymentUrlObject = new URL(url);
+  const params = new URLSearchParams(paymentUrlObject.search);
+
+  // https://url?track_ga=setting1&track_ga=setting2
+  cachedGaTrackSettings.forEach(each => {
+    params.append('track_ga', each);
+  });
+
+  paymentUrlObject.search = params.toString();
+  return paymentUrlObject.href;
+}