GA for Scroll container

src/actions/index.js

@@ -1,5 +1,5 @@
 import {actionTypes} from "../constant/ActionTypes";
-import {handleStyle} from "../utils/gaHelper";
+import {handleStyle} from "../utils/GAHelper";
 
 export const genQRInfo = text => ({
     type: actionTypes.GENERATE_QR_INFO,

src/api/TcbHandler.js

@@ -10,6 +10,7 @@ const db = app.database();
 const _ = db.command
 
 export async function login() {
+    if (isLogin) return;
     await auth.signInAnonymously();
     const loginState = await auth.getLoginState();
     isLogin = loginState;

src/components/app/App.js

@@ -7,7 +7,7 @@ import PartMore from "./PartMore";
 import PartParams from "./PartParams";
 import PartDownloadViewer from "../../containers/app/PartDownloadViewer";
 import PartStylesViewer from "../../containers/app/PartStylesViewer";
-import {getDownloadCount, login} from "../../api/db";
+import {getDownloadCount, login} from "../../api/TcbHandler";
 import {connect} from 'react-redux';
 import {loadDownloadData} from "../../actions";
 import ReactGA from 'react-ga';

src/components/app/PartMore.js

@@ -8,15 +8,15 @@ import LinkButton from "../link/LinkButton";
 import ImageZoom from "../../containers/app/ImageZoom";
 import LinkTrace from "../link/LinkTrace";
 import {isPC} from "../../utils/navigatorUtils";
+import {handleScroll} from "../../utils/GAHelper";
 
 const pictures = [
-    'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg?sign=5891c0a78a0220aefd58293ee4ec7db7&t=1593527651',
+    'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg',
-    'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=f97850ff371131dcf5891b7185c6c16b&t=1593527984',
+    'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg',
-    'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery03.jpg?sign=86b896e0c7f9c66881a78a969551e47b&t=1593531244',
+    'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery03.jpg',
 ]
 
 const PartMore = () => {
-    const zoom = React.useRef(mediumZoom());
 
     return (
         <div className="Qr-titled-nobg">
@@ -38,18 +38,12 @@ const PartMore = () => {
                     </div>
                     <ScrollContainer
                         className="Qr-s Qr-s-gallery"
+                        onStartScroll={(e) => handleScroll('gallery')}
                         hideScrollbars={false}
                         horizontal={true}
                         vertical={false}>
                         <div className="Qr-box">
-                            {
+                            <Gallery contents={pictures}/>
-                                pictures.map((url) => (
-                                        <LazyLoad offsetVertical={200}>
-                                            <ImageZoom zoom={zoom.current} background={"rgba(0, 0, 0, 0.8)"} className="Qr-gallery-image" src={url}/>
-                                        </LazyLoad>
-                                    )
-                                )
-                            }
                         </div>
                     </ScrollContainer>
                     <div className="Qr-Centered">
@@ -107,4 +101,17 @@ const PartMore = () => {
     )
 }
 
+const Gallery = ({ contents }) => {
+    const zoom = React.useRef(mediumZoom());
+
+    return (
+        contents.map((url) => (
+                <LazyLoad offsetVertical={200}>
+                    <ImageZoom zoom={zoom.current} background={"rgba(0, 0, 0, 0.8)"} className="Qr-gallery-image" src={url}/>
+                </LazyLoad>
+            )
+        )
+    );
+}
+
 export default PartMore;

src/components/app/PartStyles.js

@@ -3,6 +3,7 @@ import './App.css';
 import StyleListViewer from "../../containers/style/StyleListViewer";
 import {isPC} from "../../utils/navigatorUtils";
 import ScrollContainer from 'react-indiana-drag-scroll'
+import {handleScroll} from "../../utils/GAHelper";
 
 const PartStyles = ({ setParamInfo }) => {
     const [loaded, setLoaded] = useState(false);
@@ -22,6 +23,7 @@ const PartStyles = ({ setParamInfo }) => {
         </div>
         <ScrollContainer
             className="Qr-s"
+            onStartScroll={(e) => handleScroll('style')}
             hideScrollbars={false}
             horizontal={true}
             vertical={false}

src/components/link/LinkTrace.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {handleLink} from "../../utils/gaHelper";
+import {handleLink} from "../../utils/GAHelper";
 
 const LinkTrace = (props) => {
     return (

src/containers/app/InputText.js

@@ -3,7 +3,7 @@ import {genQRInfo} from "../../actions";
 import React, {useRef} from "react";
 import {isPicture} from "../../utils/imageUtils";
 import {decodeData} from "../../utils/qrcodeHandler";
-import { handleUpload, handleInputUrl } from "../../utils/gaHelper";
+import { handleUpload, handleInputUrl } from "../../utils/GAHelper";
 
 const InputText = ({dispatch}) => {
     const textRef = useRef();

src/containers/app/PartDownloadViewer.js

@@ -1,9 +1,9 @@
 import {connect} from 'react-redux';
 import PartDownload from "../../components/app/PartDownload";
 import {saveImg, saveSvg} from "../../utils/downloader";
-import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/db";
+import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/TcbHandler";
 import {getParamDetailedValue, outerHtml} from "../../utils/util";
-import {handleDownloadJpg, handleDownloadSvg} from "../../utils/gaHelper";
+import {handleDownloadJpg, handleDownloadSvg} from "../../utils/GAHelper";
 
 function saveDB(state, type, updateDownloadData) {
     return new Promise(resolve => {

src/containers/param/ParamUploadViewer.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import {changeParam} from "../../actions";
 import ParamUpload from "../../components/param/ParamUpload";
 import {isPicture, toBase64} from "../../utils/imageUtils";
-import {handleUpload} from "../../utils/gaHelper";
+import {handleUpload} from "../../utils/GAHelper";
 
 const mapStateToProps = (state, ownProps) => ({
     rendererIndex: ownProps.rendererIndex,

src/utils/gaHelper.js

@@ -52,4 +52,12 @@ export function handleInputUrl() {
         category: 'URL',
         action: 'Input',
     });
-}
+}
+
+export function handleScroll(label) {
+    ReactGA.event({
+        category: 'ScrollContainer',
+        action: 'scroll',
+        label: label
+    });
+}

src/utils/util.js

@@ -1,10 +1,6 @@
 import {ParamTypes} from "../constant/ParamTypes";
 let seed = 0;
 
-export function srand(sd) {
-    seed = sd;
-}
-
 export function rand(min, max) {
     seed = (seed * 9301 + 49297) % 233280;
     return min + (seed / 233280.0) * (max - min);
@@ -64,4 +60,4 @@ function getScrollbarWidth() {
 
 export function setScrollbarWidthProp() {
     document.documentElement.style.setProperty('--scrollbar-width', getScrollbarWidth() + "px");
-}
+}