From 8dfd52ed8c7ad8458bc07dcd0d08e73b63ffb173 Mon Sep 17 00:00:00 2001
From: Ian Bicking <ianb@colorstudy.com>
Date: Wed, 14 Dec 2016 14:21:00 -0600
Subject: [PATCH] Fix #2041, track og:image images differently than other
 direct link images

---
 docs/METRICS.md               |  7 +++++++
 server/src/pages/shot/view.js | 17 +++++++++++++++--
 server/src/server.js          | 11 ++++++-----
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/docs/METRICS.md b/docs/METRICS.md
index 3dcd5fc425..dc88871271 100644
--- a/docs/METRICS.md
+++ b/docs/METRICS.md
@@ -198,6 +198,7 @@ These are events that an add-on user can encounter on a shot they own
 
 1. [x] Visit the page, `web/visit/non-owner` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/252d0b0F1A3i453h2r32/Image%202016-09-07%20at%203.38.11%20PM.png?v=357dd63c)
 2. [x] Visit an image directly, when the image isn't embedded directly in a Page Shot shot page, `web/visit/direct-view`
+3. [x] View an image directly, when the image is being shown as part of a Facebook/Twitter style preview (the og:image or twitter:image), `web/visit/direct-view-embedded`
 2. [x] Click flag button `web/start-flag/navbar` ![image](https://d17oy1vhnax1f7.cloudfront.net/items/3T3a1y0K2l0H2d1p1e0L/Image%202016-09-07%20at%203.38.36%20PM.png?v=ba92ba16)
 3. [x] Click Share (same as for owner, but with `share-non-owner` instead of `share-owner`, and `start-share-non-owner`)
 4. [x] Visit original URL `web/goto-original-url/navbar`
@@ -212,6 +213,12 @@ These are events that an add-on user can encounter on a shot they own
 1. [x] When an expired shot is deleted (about 2 weeks after expiration) it sends `server/clean-deleted-shot` with an eventValue of the number of shots cleaned at that moment.  (By default these are checked every minute.)
 2. [x] When a successful request to `/api/login` happens, we send `server/api-login`
 
+#### Page views
+
+1. [x] Views of shot pages show up as `/a-shot/{hash}`
+2. [x] Views of images directly, `/images/{hash}`
+3. [x] Views of images that came from og/twitter metadata, `/images/embedded/{hash}`
+
 #### Homepage web visits
 
 1. ~~Click install from Firefox, `web/start-install/homepage-firefox`~~
diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
index 1a4e4df2f7..1a3a8944a8 100644
--- a/server/src/pages/shot/view.js
+++ b/server/src/pages/shot/view.js
@@ -143,9 +143,9 @@ class Head extends React.Component {
         continue;
       }
       let text = `From ${this.props.shot.urlDisplay}`;
-      og.push(<meta key={ `ogimage${clipId}` } property="og:image" content={clip.image.url} />);
+      og.push(<meta key={ `ogimage${clipId}` } property="og:image" content={this.makeEmbeddedImageUrl(clip.image.url, "og")} />);
       og.push(<meta key={ `ogdescription${clipId}` } property="og:description" content={text} />);
-      twitter.push(<meta key={ `twitterimage${clipId}` } name="twitter:image" content={clip.image.url} />);
+      twitter.push(<meta key={ `twitterimage${clipId}` } name="twitter:image" content={this.makeEmbeddedImageUrl(clip.image.url, "twitter")} />);
       twitter.push(<meta key={ `twitterdesc${clipId}` } name="twitter:description" content={text} />);
       // FIXME: consider twitter:site @mozillapageshot
       if (clip.image.dimensions) {
@@ -155,6 +155,19 @@ class Head extends React.Component {
     }
     return og.concat(twitter);
   }
+
+  makeEmbeddedImageUrl(url, type) {
+    if (! url.startsWith("http")) {
+      return url;
+    }
+    if (url.indexOf("?") == -1) {
+      url += "?";
+    } else {
+      url += "&";
+    }
+    url += "embedded=" + encodeURIComponent(type);
+    return url;
+  }
 }
 
 class Body extends React.Component {
diff --git a/server/src/server.js b/server/src/server.js
index a8b541bbd5..46a99f92b6 100644
--- a/server/src/server.js
+++ b/server/src/server.js
@@ -756,21 +756,22 @@ app.post("/api/set-expiration", function (req, res) {
 });
 
 app.get("/images/:imageid", function (req, res) {
+  let embedded = req.query.embedded;
   Shot.getRawBytesForClip(
     req.params.imageid
   ).then((obj) => {
     if (obj === null) {
       notFound(req, res);
     } else {
-      let hasher = require("crypto").createHash("sha1");
-      hasher.update(req.params.imageid);
-      let hashedId = hasher.digest("hex").substr(0, 15);
-      let analyticsUrl = `/images/hash${encodeURIComponent(hashedId)}`;
       let localReferrer = false;
       if (req.headers["referer"]) {
         localReferrer = req.headers["referer"].startsWith(req.backend);
       }
       if (! localReferrer) {
+        let hasher = require("crypto").createHash("sha1");
+        hasher.update(req.params.imageid);
+        let hashedId = hasher.digest("hex").substr(0, 15);
+        let analyticsUrl = `/images/${embedded ? 'embedded/' : ''}hash${encodeURIComponent(hashedId)}`;
         let analytics = req.userAnalytics;
         if (! analytics) {
           analytics = ua(config.gaId);
@@ -786,7 +787,7 @@ app.get("/images/:imageid", function (req, res) {
         }).event({
           ec: "web",
           ea: "visit",
-          el: "direct-view"
+          el: embedded ? "direct-view-embedded" : "direct-view"
         }).send();
       }
       res.header("Content-Type", obj.contentType);