From 622712cb4a36633c129d75a2b38fe9e28e5e40aa Mon Sep 17 00:00:00 2001
From: CPunisher <1343316114@qq.com>
Date: Wed, 1 Jul 2020 23:22:32 +0800
Subject: [PATCH] GA for zoom

---
 src/components/app/PartMore.js | 13 ++++++++-----
 src/utils/gaHelper.js          | 10 +++++++++-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/app/PartMore.js b/src/components/app/PartMore.js
index 8dab609..d0cd722 100644
--- a/src/components/app/PartMore.js
+++ b/src/components/app/PartMore.js
@@ -8,7 +8,7 @@ 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";
+import {handleScroll, handleZoom} from "../../utils/gaHelper";
 
 const pictures = [
     'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery04.jpg',
@@ -103,11 +103,14 @@ const PartMore = () => {
 }
 
 const Gallery = ({ contents }) => {
-    const zoom = React.useRef(mediumZoom());
+    const zoom = mediumZoom();
+    const zoomRef = React.useRef(zoom);
+    zoom.on('open', event => {handleZoom(event.target.src)})
+
     return (
-        contents.map((url) => (
-                <LazyLoad offsetVertical={200}>
-                    <ImageZoom zoom={zoom.current} background={"rgba(0, 0, 0, 0.8)"} className="Qr-gallery-image" src={url}/>
+        contents.map((url, index) => (
+                <LazyLoad key={'lazy_gallery_' + index} offsetVertical={200}>
+                    <ImageZoom key={'gallery_' + index} zoom={zoomRef.current} background={"rgba(0, 0, 0, 0.8)"} className="Qr-gallery-image" src={url}/>
                 </LazyLoad>
             )
         )
diff --git a/src/utils/gaHelper.js b/src/utils/gaHelper.js
index 825c9b8..8716ca5 100644
--- a/src/utils/gaHelper.js
+++ b/src/utils/gaHelper.js
@@ -57,7 +57,15 @@ export function handleInputUrl() {
 export function handleScroll(label) {
     ReactGA.event({
         category: 'ScrollContainer',
-        action: 'scroll',
+        action: 'Scroll',
         label: label
     });
 }
+
+export function handleZoom(url) {
+    ReactGA.event({
+        category: 'Image',
+        action: 'Zoom',
+        label: url
+    });
+}