add matomo to homepage

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

@@ -4,6 +4,7 @@ import { ThemeContext, themes } from '../themeContext'
 import Carousel from 'react-multi-carousel'
 import 'react-multi-carousel/lib/styles.css'
 import CustomNavButtons from './customNavButtons'
+const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 function HomeTabFeatured() {
   const themeFilter = useContext(ThemeContext)
@@ -44,7 +45,7 @@ function HomeTabFeatured() {
                 <div className="h6 w-50 p-4" style={{ flex: "1" }}>
                   <h5>JUMP INTO WEB3</h5>
                   <p>The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum.</p>
-                  <a className="remixui_home_text" target="__blank" href="https://remix-project.org">More</a>
+                  <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org">More</a>
                 </div>
               </div>
               <div className="d-flex">
@@ -55,7 +56,7 @@ function HomeTabFeatured() {
                   <p>
                     Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second “Remixer” user NFT badge to give to any other user of their choice.
                   </p>
-                  <a className="remixui_home_text" target="__blank" href="https://rewards.remix.ethereum.eth.limo">More</a>
+                  <a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo">More</a>
                 </div>
               </div>
               <div className="d-flex">
@@ -64,7 +65,7 @@ function HomeTabFeatured() {
                   <h5>BETA TESTING</h5>
                   <p style={{ fontStyle: 'italic' }}>Our community supports us.</p>
                   <p>You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features!</p>
-                  <a className="remixui_home_text" target="__blank" href="https://rewards.remix.ethereum.eth.limo">More</a>
+                  <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'betatesting'])} target="__blank" href="https://rewards.remix.ethereum.eth.limo">More</a>
                 </div>
               </div>
             </Carousel>

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

@@ -2,6 +2,7 @@
 import React, { useState, useRef, useReducer } from 'react'
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
+const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 interface  HomeTabFileProps {
   plugin: any
@@ -36,7 +37,8 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
 
   const inputValue = useRef(null)
 
-  const processLoading = () => {
+  const processLoading = (type: string) => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'importFrom' + type])
     const contentImport = plugin.contentImport
     const workspace = plugin.fileManager.getProvider('workspace')
     contentImport.import(
@@ -70,18 +72,22 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
   }
 
   const createNewFile = async () => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'createNewFile'])
     plugin.verticalIcons.select('filePanel')
     await plugin.call('filePanel', 'createNewFile')
   }
 
   const uploadFile = async (target) => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'uploadFile'])
     await plugin.call('filePanel', 'uploadFile', target)
   }
 
   const connectToLocalhost = () => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'connectToLocalhost'])
     plugin.appManager.activatePlugin('remixd')
   }
   const importFromGist = () => {
+    _paq.push(['trackEvent', 'hometab', 'filesSection', 'importFromGist'])
     plugin.call('gistHandler', 'load', '')
     plugin.verticalIcons.select('filePanel')
   }
@@ -108,7 +114,7 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
         okLabel='Import'
         hide={ !state.showModalDialog }
         handleHide={ () => hideFullMessage() }
-        okFn={ () => processLoading() }
+        okFn={ () => processLoading(state.modalInfo.title) }
       >
         <div className="p-2 user-select-auto">
           { state.modalInfo.loadItem !== '' && <span>Enter the { state.modalInfo.loadItem } you would like to load.</span> }

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

@@ -60,7 +60,7 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
     await plugin.call('filePanel', 'createWorkspace', templateName + "_" + timeStamp, templateName)
     await plugin.call('filePanel', 'setWorkspace', templateName + "_" + timeStamp)
     plugin.verticalIcons.select('filePanel')
-    _paq.push(['trackEvent', 'homeTab', 'homeGetStarted', templateName])
+    _paq.push(['trackEvent', 'hometab', 'homeGetStarted', templateName])
   }
 
   return (

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

@@ -34,7 +34,7 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
     await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
     plugin.call('LearnEth', 'startTutorial', 'ethereum/remix-workshops', 'master', tutorial)
     plugin.verticalIcons.select('LearnEth')
-    _paq.push(['trackEvent', 'homeTab', 'startLearnEthTutorial', tutorial])
+    _paq.push(['trackEvent', 'hometab', 'startLearnEthTutorial', tutorial])
   }
 
   return (

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

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react'
+const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 function HomeTabScamAlert () {
   return (
@@ -15,10 +16,10 @@ function HomeTabScamAlert () {
         </span>
         <span className="pl-4 mt-1">        
           Beware of online videos promoting "liquidity front runner bots":  
-          <a className="pl-2 remixui_home_text" target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">Learn more</a>
+          <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])}  target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">Learn more</a>
         </span>
         <span className="pl-4 mt-1">
-          Additional safety tips: &nbsp;<a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">here</a>
+          Additional safety tips: &nbsp;<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">here</a>
         </span>
       </div>
     </div>

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

@@ -4,6 +4,7 @@ import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/Bas
 import { ThemeContext } from '../themeContext'
 import React, { useEffect, useState, useRef, useContext } from 'react'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'// eslint-disable-line
+const _paq = window._paq = window._paq || [] // eslint-disable-line
 
 function HomeTabTitle() {
   useEffect(() => {
@@ -119,10 +120,10 @@ function HomeTabTitle() {
       </div>
       <b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>The Native IDE for Web3 Development.</b>
       <div className="pb-1" id="hTGeneralLinks">
-        <a className="remixui_home_text" target="__blank" href="https://remix-project.org">Website</a>
+        <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'webSite'])} target="__blank" href="https://remix-project.org">Website</a>
-        <a className="pl-2 remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest">Documentation</a>
+        <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'documentation'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest">Documentation</a>
-        <a className="pl-2 remixui_home_text" target="__blank" href="https://remix-plugin-docs.readthedocs.io/en/latest/">Remix Plugin</a>
+        <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'remixPlugin'])} target="__blank" href="https://remix-plugin-docs.readthedocs.io/en/latest/">Remix Plugin</a>
-        <a className="pl-2 remixui_home_text" target="__blank" href="https://github.com/ethereum/remix-desktop/releases">Remix Desktop</a>
+        <a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'remixDesktop'])} target="__blank" href="https://github.com/ethereum/remix-desktop/releases">Remix Desktop</a>
       </div>
       <div className="d-flex pb-1 align-items-center">
         <input
@@ -135,7 +136,10 @@ function HomeTabTitle() {
         />
         <button
           className="form-control border d-flex align-items-center p-2 justify-content-center fas fa-search bg-light"
-          onClick={(e) => openLink()}
+          onClick={(e) => {
+            _paq.push(['trackEvent', 'hometab', 'header', 'searchDocumentation'])
+            openLink()
+          }}
           disabled={state.searchDisable}
           style={{ width: "3rem" }}
         >