matomo tracking

apps/remix-ide/src/app.js

@@ -165,7 +165,14 @@ class AppComponent {
 
     this.matomoConfAlreadySet = Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
     this.matomoCurrentSetting = Registry.getInstance().get('config').api.get('settings/matomo-analytics')
-    this.showMatamo = matomoDomains[window.location.hostname] && !this.matomoConfAlreadySet
+
+    let electronTracking = false
+
+    if (window.electronAPI) {
+      electronTracking = await window.electronAPI.canTrackMatomo()
+    }
+
+    this.showMatamo = (matomoDomains[window.location.hostname] || electronTracking) && !this.matomoConfAlreadySet
 
     this.walkthroughService = new WalkthroughService(appManager)
 

apps/remix-ide/src/app/plugins/permission-handler-plugin.tsx

@@ -98,7 +98,7 @@ export class PermissionHandlerPlugin extends Plugin {
           <div className='d-flex flex-row'>
             <span onClick={()=>{}}>To change the permission go to </span>
             <span className='px-2' style={{ fontWeight: 'bolder' }}>Plugin Manager</span>
-            <img alt="" id="permissionModalImagesFrom" src="/assets/img/pluginManager.webp" style={{ height: '1rem', width: '1rem' }} />
+            <img alt="" id="permissionModalImagesFrom" src="assets/img/pluginManager.webp" style={{ height: '1rem', width: '1rem' }} />
             <span className='pl-1' style={{ fontWeight: 'bolder' }}> / Permissions</span>
           </div>
         </div>

apps/remix-ide/src/app/plugins/remixGuide.tsx

@@ -93,7 +93,7 @@ export class RemixGuidePlugin extends ViewPlugin {
         <RemixUIGridView
           plugin={this}
           styleList={""}
-          logo='/assets/img/YouTubeLogo.webp'
+          logo='assets/img/YouTubeLogo.webp'
           enableFilter={true}
           showUntagged={true}
           showPin={false}

apps/remix-ide/src/app/plugins/remixGuideData.json

@@ -1,5 +1,5 @@
 {
-  "logo": "/assets/img/YouTubeLogo.webp",
+  "logo": "assets/img/YouTubeLogo.webp",
   "title": "Remix Guide",
   "description": "Streamlined access to categorized video tutorials for mastering Remix IDE. From fundamentals to advanced techniques, level up your development skills with ease.",
   "sections": [

apps/remix-ide/src/assets/js/loader.js

@@ -2,20 +2,17 @@ const domains = {
   'remix-alpha.ethereum.org': 27,
   'remix-beta.ethereum.org': 25,
   'remix.ethereum.org': 23,
-  '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
+  'localhost': 35 // remix desktop
 }
 
-const domainsSecondaryTracker = {
-  'remix-alpha.ethereum.org': 27,
-  'remix-beta.ethereum.org': 25,
-  'remix.ethereum.org': 23,
-  '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
-}
+let domainToTrack = domains[window.location.hostname]
 
-if (domains[window.location.hostname]) {
+
+function trackDomain(domainToTrack) {
   var _paq = window._paq = window._paq || []
+  console.log('Tracking domain', domainToTrack, _paq)
   /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-  _paq.push(["setExcludedQueryParams", ["code","gist"]]);
+  _paq.push(["setExcludedQueryParams", ["code", "gist"]]);
   _paq.push(["setExcludedReferrers", ["etherscan.io"]]);
   _paq.push(['enableJSErrorTracking']);
   _paq.push(['trackPageView']);
@@ -31,13 +28,37 @@ if (domains[window.location.hostname]) {
   }
   (function () {
     var u = "https://ethereumfoundation.matomo.cloud/";
-    _paq.push(['setTrackerUrl', u + 'matomo.php']);
-    _paq.push(['setSiteId', domains[window.location.hostname]]);
+    _paq.push(['setTrackerUrl', u + 'matomo.php?debug=1']);
+    _paq.push(['setSiteId', domainToTrack]);
     var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-    g.async = true; g.src = '//cdn.matomo.cloud/ethereumfoundation.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
-  })()
+    g.async = true; g.src = 'https://cdn.matomo.cloud/ethereumfoundation.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g, s);
+  })();
 }
 
+if (window.electronAPI) {
+  window.electronAPI.canTrackMatomo().then((canTrack) => {
+    if (!canTrack) {
+      console.log('Matomo tracking is disabled on Dev mode')
+      return
+    }
+    window._paq = {
+      push: function (...data) {
+        if (!window.localStorage.getItem('config-v0.8:.remix.config') ||
+          (window.localStorage.getItem('config-v0.8:.remix.config') && !window.localStorage.getItem('config-v0.8:.remix.config').includes('settings/matomo-analytics'))) {
+            // require user tracking consent before processing data
+        } else {
+          if (JSON.parse(window.localStorage.getItem('config-v0.8:.remix.config'))['settings/matomo-analytics']) {
+            window.electronAPI.trackEvent(...data)
+          }
+        }
+      }
+    }
+  })
+} else {
+  if (domainToTrack) {
+    trackDomain(domainToTrack)
+  }
+}
 function isElectron() {
   // Renderer process
   if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {

apps/remixdesktop/src/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, dialog, Menu, MenuItem, shell, utilityProcess, screen } from 'electron';
+import { app, BrowserWindow, dialog, Menu, MenuItem, shell, utilityProcess, screen, ipcMain } from 'electron';
 import path from 'path';
 
 
@@ -41,6 +41,7 @@ export const createWindow = async (dir?: string): Promise<void> => {
     frame: true,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js')
+
     },
   });
   mainWindow.webContents.setWindowOpenHandler((details) => {
@@ -76,7 +77,7 @@ export const createWindow = async (dir?: string): Promise<void> => {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
-  trackEvent('App', 'Launch', app.getVersion(), 1);
+  trackEvent('App', 'Launch', app.getVersion(), 1, 1);
   trackEvent('App', 'OS', process.platform, 1);
   require('./engine')
 });
@@ -145,4 +146,24 @@ if (!isE2E || isE2ELocal)
   Menu.setApplicationMenu(Menu.buildFromTemplate(menu))
 
 
+ipcMain.handle('config:isPackaged', async () => {
+  return isPackaged
+})
+
+ipcMain.handle('config:isE2E', async () => {
+  return isE2E
+})
+
+ipcMain.handle('config:canTrackMatomo', async (event, name: string) => {
+  console.log('config:canTrackMatomo', ((process.env.NODE_ENV === 'production' || isPackaged) && !isE2E))
+  return ((process.env.NODE_ENV === 'production' || isPackaged) && !isE2E)
+})
+
+ipcMain.handle('matomo:trackEvent', async (event, data) => {
+  if (data && data[0] && data[0] === 'trackEvent') {
+    trackEvent(data[1], data[2], data[3], data[4])
+  }
+})
+
+
 

apps/remixdesktop/src/preload.ts

@@ -15,12 +15,15 @@ ipcRenderer.invoke('getWebContentsID').then((id: number) => {
 })
 
 contextBridge.exposeInMainWorld('electronAPI', {
+  isPackaged: () => ipcRenderer.invoke('config:isPackaged'),
+  isE2E: () => ipcRenderer.invoke('config:isE2E'),
+  canTrackMatomo: () => ipcRenderer.invoke('config:canTrackMatomo'),
+  trackEvent: (args: any[]) => ipcRenderer.invoke('matomo:trackEvent', args), 
+
   activatePlugin: (name: string) => {
     return ipcRenderer.invoke('manager:activatePlugin', name)
   },
 
-  getWindowId: () => ipcRenderer.invoke('getWindowID'),
-
   plugins: exposedPLugins.map(name => {
     return {
       name,

apps/remixdesktop/src/utils/matamo.ts

@@ -1,21 +1,38 @@
-import { isE2E } from "../main";
-import { isPackaged } from "../main";
+import { screen } from 'electron';
+import { isPackaged, isE2E } from "../main";
+
 
 var MatomoTracker = require('matomo-tracker');
 
 // Function to send events to Matomo
-export function trackEvent(category: string, action: string, name: string, value: string | number): void {
+export function trackEvent(category: string, action: string, name: string, value: string | number, new_visit: number = 0): void {
   var matomo = new MatomoTracker(35, 'http://ethereumfoundation.matomo.cloud/matomo.php');
   matomo.on('error', function (err: any) {
     console.log('error tracking request: ', err);
   });
 
+
+  // Customize the user agent
+  const electronVersion = process.versions.electron;
+  const chromiumVersion = process.versions.chrome;
+  const os = process.platform; // 'darwin', 'win32', 'linux', etc.
+  const osVersion = process.getSystemVersion();
+
+  const ua = `Electron/${electronVersion} (Chromium/${chromiumVersion}) ${os} ${osVersion}`;
+
+
+  const res = `${screen.getPrimaryDisplay().size.width}x${screen.getPrimaryDisplay().size.height}`;
+
   if ((process.env.NODE_ENV === 'production' || isPackaged) && !isE2E) {
+    console.log('trackEvent', category, action, name, value, ua, new_visit);
     matomo.track({
       e_c: category,
       e_a: action,
       e_n: name,
       e_v: value,
+      ua,
+      new_visit,
+      res,
       url: 'https://github.com/remix-project-org/remix-desktop'
       // You can add other parameters if needed
     }, (error: any) => {
@@ -25,6 +42,8 @@ export function trackEvent(category: string, action: string, name: string, value
         console.log('Event tracked successfully');
       }
     });
+  } else {
+    console.log('Matomo tracking is disabled');
   }
 
 }

libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx

@@ -85,7 +85,7 @@ function HomeTabFeatured() {
               </div>
               <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
                 <a href="https://www.youtube.com/@EthereumRemix/videos" target="__blank">
-                  <img src={'/assets/img/YouTubeLogo.webp'} className="remixui_carouselImage" alt=""></img>
+                  <img src={'assets/img/YouTubeLogo.webp'} className="remixui_carouselImage" alt=""></img>
                 </a>
                 <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: '1' }}>
                   <h5>
@@ -109,7 +109,7 @@ function HomeTabFeatured() {
               </div>
               <div className="mr-1 pr-1 d-flex align-items-center justify-content-center h-100">
                 <a href="https://docs.google.com/forms/d/e/1FAIpQLSd0WsJnKbeJo-BGrnf7WijxAdmE4PnC_Z4M0IApbBfHLHZdsQ/viewform" target="__blank">
-                  <img src={'/assets/img/remixRewardBetaTester_small.webp'} className="remixui_carouselImage_remixbeta" alt=""></img>
+                  <img src={'assets/img/remixRewardBetaTester_small.webp'} className="remixui_carouselImage_remixbeta" alt=""></img>
                 </a>
                 <div className="h6 w-50 p-2 pl-4  align-self-center" style={{ flex: '1' }}>
                   <h5>

libs/remix-ui/permission-handler/src/lib/permission-dialog.tsx

@@ -19,11 +19,11 @@ const PermissionHandlerDialog = (props: PermissionHandlerProps) => {
   }
 
   const imgFrom = () => {
-    if (!from.icon || from.icon === '') from.icon = "/assets/img/pluginManager.webp"
+    if (!from.icon || from.icon === '') from.icon = "assets/img/pluginManager.webp"
     return <img className={`opacity(0.5);`} alt="" id="permissionModalImagesFrom" src={from.icon} />
   }
   const imgTo = () => {
-    if (!to.icon || to.icon === '') to.icon = "/assets/img/pluginManager.webp"
+    if (!to.icon || to.icon === '') to.icon = "assets/img/pluginManager.webp"
     return <img className={`opacity(0.5);`} alt="" id="permissionModalImagesTo" src={to.icon} />
   }
   const pluginsImages = () => {