Merge pull request #321 from cofacts/rss-tracking

Track rss, and add utm_source to each url that generated from feed.js
cofacts · Sep 16, 2020 · 0e0a3a6 · 0e0a3a6
2 parents 9e4f20f + ab602ca
commit 0e0a3a6
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 12 deletions.
diff --git a/components/Subscribe/FeedDisplay.js b/components/Subscribe/FeedDisplay.js
@@ -81,8 +81,6 @@ function FeedDisplay({ listQueryVars }) {
     handleClose();
   };
 
-  const encodedFeedUrl = encodeURIComponent(feedUrl);
-
   return (
     <>
       <Button onClick={handleClick} className={classes.button}>
@@ -105,7 +103,9 @@ function FeedDisplay({ listQueryVars }) {
         <List>
           <ListItemLink
             email={true}
-            href={`https://feedrabbit.com/?url=${encodedFeedUrl}`}
+            href={`https://feedrabbit.com/?url=${encodeURIComponent(
+              feedUrl + `&source=Feedrabbit`
+            )}`}
             icon={mailIcon}
             onClick={handleClose}
           >
@@ -119,7 +119,9 @@ function FeedDisplay({ listQueryVars }) {
             ></ListItemText>
           </ListItemLink>
           <ListItemLink
-            href={`https://feedly.com/i/discover/sources/search/feed/${encodedFeedUrl}`}
+            href={`https://feedly.com/i/discover/sources/search/feed/${encodeURIComponent(
+              feedUrl + `&source=Feedly`
+            )}`}
             icon={feedlyIcon}
             onClick={handleClose}
           >
@@ -128,7 +130,7 @@ function FeedDisplay({ listQueryVars }) {
 
           <ListItemCopy
             icon={rssIcon}
-            textToCopy={feedUrl}
+            textToCopy={feedUrl + `&source=Others`}
             onSuccess={() => copySuccess(t`Copied to clipboard!`)}
           >
             {t`Get RSS Feed Link`}
@@ -146,23 +148,23 @@ function FeedDisplay({ listQueryVars }) {
             <IFTTTItem
               icon={lineIcon}
               IFTTTAppletUrl={PUBLIC_LINE_IFTTT_APPLET_URL}
-              feedUrl={feedUrl}
+              feedUrl={feedUrl + `&source=IFTTT_Line`}
               tutorialYoutubeId={PUBLIC_LINE_IFTTT_TUTORIAL_YOUTUBEID}
             >
               {'Line'}
             </IFTTTItem>
             <IFTTTItem
               icon={telegramIcon}
               IFTTTAppletUrl={PUBLIC_TELEGRAM_IFTTT_APPLET_URL}
-              feedUrl={feedUrl}
+              feedUrl={feedUrl + `&source=IFTTT_Telegram`}
               tutorialYoutubeId={PUBLIC_TELEGRAM_IFTTT_TUTORIAL_YOUTUBEID}
             >
               {'Telegram'}
             </IFTTTItem>
             <IFTTTItem
               icon={slackIcon}
               IFTTTAppletUrl={PUBLIC_SLACK_IFTTT_APPLET_URL}
-              feedUrl={feedUrl}
+              feedUrl={feedUrl + `&source=IFTTT_Slack`}
               tutorialYoutubeId={PUBLIC_SLACK_IFTTT_TUTORIAL_YOUTUBEID}
             >
               {'Slack'}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,8 @@
     "react-virtualized-auto-sizer": "^1.0.2",
     "rollbar": "^2.14.4",
     "stackimpact": "^1.3.23",
-    "ttag": "^1.7.22"
+    "ttag": "^1.7.22",
+    "universal-analytics": "^0.4.23"
   },
   "devDependencies": {
     "@apollo/react-testing": "^3.0.1",

diff --git a/pages/api/articles/[feed].js b/pages/api/articles/[feed].js
@@ -10,11 +10,12 @@ import { config } from 'lib/apollo';
 import rollbar from 'lib/rollbar';
 import { TYPE_NAME } from 'constants/replyType';
 import JsonUrl from 'json-url';
+import ua from 'universal-analytics';
 
 const TITLE_LENGTH = 40;
 const AVAILABLE_FEEDS = ['rss2', 'atom1', 'json1'];
 const {
-  publicRuntimeConfig: { PUBLIC_URL },
+  publicRuntimeConfig: { PUBLIC_URL, PUBLIC_GA_TRACKING_ID },
 } = getConfig();
 
 // This should match article "time" fields in ListArticleOrderBy
@@ -152,7 +153,7 @@ async function articleFeedHandler(req, res) {
   try {
     data.ListArticles.edges.forEach(({ node }) => {
       const text = getArticleText(node);
-      const url = `${PUBLIC_URL}/article/${node.id}`;
+      const url = `${PUBLIC_URL}/article/${node.id}?utm_source=${query.source}&utm_medium=RSS`;
       const articleReply = node.articleReplies[0];
       feedInstance.addItem({
         id: url,
@@ -184,12 +185,23 @@ async function articleFeedHandler(req, res) {
       });
     });
 
+    const visitor = ua(PUBLIC_GA_TRACKING_ID);
+    const params = {
+      ec: 'RSS',
+      ea: 'Poll',
+      el: query.source,
+      dp: JSON.stringify(listQueryVars), // filter, document path: maxlength 2048 bytes
+      dt: JSON.stringify(req.headers), // some headers contain follower number, document title: maxlength 1500 bytes
+    };
+    visitor.event(params).send();
+
     // https://stackoverflow.com/questions/595616/what-is-the-correct-mime-type-to-use-for-an-rss-feed
     const type = accepts(req).type([
       'application/rss+xml',
       'application/xml',
       'text/xml',
     ]);
+
     res.setHeader('Content-Type', type || 'text/xml');
     res.send(feedInstance[feed]());
   } catch (e) {