Add Google Analytics and Google Adsense

grimmer0125 · May 26, 2018 · 9490c45 · 9490c45
1 parent f663724
commit 9490c45
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 31 deletions.
diff --git a/client/index.html b/client/index.html
@@ -1,14 +1,34 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" type="text/css" href="/styles/octicons/octicons.css">
-        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,300,500">
-        <title>Search GitHub!</title>
-    </head>
-    <body>
-        <div id="app"></div>
-        <script src="/build-client/bundle.js" charset="utf-8"></script>
-    </body>
+
+<head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-10013090-3"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-10013090-3');
+  </script>
+
+  <!-- Google Adsense -->
+  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- <link rel="icon" href="webIcon.png"> -->
+  <link rel="stylesheet" type="text/css" href="/styles/octicons/octicons.css">
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,300,500">
+  <title>Search Your GitHub Starred Repo</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="/build-client/bundle.js" charset="utf-8"></script>
+</body>
+
 </html>
diff --git a/client/js/repos/ReposPage.js b/client/js/repos/ReposPage.js
@@ -178,7 +178,7 @@ class ReposPage extends React.Component {
   }
 
   componentDidMount() {
-
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
   }
 
   componentWillReceiveProps(nextProps) {
@@ -279,6 +279,12 @@ class ReposPage extends React.Component {
 
     return (
       <div className="flex-column layout-column-start-center" style={{ width: '100%' }}>
+        <ins className="adsbygoogle"
+          style={{ display: 'block' }}
+          data-ad-client="ca-pub-1240343082911496"
+          data-ad-slot="4365785532"
+          data-ad-format="auto"
+        />
         <div>
           <a href="https://grimmer.netlify.com/">About me</a>
         </div>
@@ -320,6 +326,12 @@ class ReposPage extends React.Component {
 
     return (
       <div className="flex-column layout-column-start-center" style={{ width: '100%' }}>
+        <ins className="adsbygoogle"
+          style={{ display: 'block' }}
+          data-ad-client="ca-pub-1240343082911496"
+          data-ad-slot="4365785532"
+          data-ad-format="auto"
+        />
         <div className="loading-text">
           {statusStr}
         </div>
@@ -328,6 +340,11 @@ class ReposPage extends React.Component {
   }
 
   render() {
+    // ads with no set-up
+    // <AdSense.Google
+    //   client="ca-pub-1240343082911496"
+    //   slot="4365785532"
+    // />;
     if (this.hasData()) {
       return this.renderComponents();
     }

diff --git a/client/templates/login.html b/client/templates/login.html
@@ -3,7 +3,21 @@
 
 <head>
 
-  <title>GitHub Search</title>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-10013090-3"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-10013090-3');
+  </script>
+
+  <title>Search Your GitHub Starred Repo</title>
+  <!-- <link rel="icon" href="webIcon.png"> -->
 
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
@@ -14,34 +28,35 @@
 
 <body>
 
-<div class="container">
+  <div class="container">
 
-  <div class="row" style="padding-top:44px">
-    <div class="col-xs-12 text-center" style="padding-bottom:32px">
-      <span class="mega-octicon octicon-octoface"></span>
+    <div class="row" style="padding-top:44px">
+      <div class="col-xs-12 text-center" style="padding-bottom:32px">
+        <span class="mega-octicon octicon-octoface"></span>
+      </div>
     </div>
-  </div>
 
 
-  <!-- <p>Select service to login</p> -->
-  <h2 class="col-xs-12 text-center text-success" style="margin-bottom:0">Full-Text Search GitHub (missing function on GitHub)</h2>
-  <h5 class="col-xs-12 text-center text-success" style="margin-top:0">Target: Readme, description, homepage and URL of your starred repository</h5>
-  <div class="row" style="padding:96px 0 16px 0">
-    <div class="col-xs-offset-2 col-xs-8 col-md-offset-3 col-md-6">
-      <h4 class="text-center">GitHub site only supplies the function to search repo-descripton and also only exact phrase match. This site supports both types. Type <em>"A B"</em> for phrase <em>A B</em> and type <em>A B</em> for sequence not important case.</h4>
-      <!-- <h6>Starred Search requests no permissions other than read access to public data.</h6>
+    <!-- <p>Select service to login</p> -->
+    <h2 class="col-xs-12 text-center text-success" style="margin-bottom:0">Full-Text Search GitHub (missing function on GitHub)</h2>
+    <h5 class="col-xs-12 text-center text-success" style="margin-top:0">Target: Readme, description, homepage and URL of your starred repository</h5>
+    <div class="row" style="padding:96px 0 16px 0">
+      <div class="col-xs-offset-2 col-xs-8 col-md-offset-3 col-md-6">
+        <h4 class="text-center">GitHub site only supplies the function to search repo-descripton and also only exact phrase match. This site supports both types. Type <em>"A B"</em> for phrase <em>A B</em> and type <em>A B</em> for sequence not important case.</h4>
+        <!-- <h6>Starred Search requests no permissions other than read access to public data.</h6>
       <h6>Authorization is used to identify your account and avoid rate-limited anonymous GitHub API requests.</h6> -->
-    </div>
+      </div>
 
-  </div>
+    </div>
 
-  <div class="row">
-    <div class="col-xs-12 text-center">
-      <button class="btn btn-success" onclick="window.location.href = '/auth/login/github'">Authorize</button>
+    <div class="row">
+      <div class="col-xs-12 text-center">
+        <button class="btn btn-success" onclick="window.location.href = '/auth/login/github'">Authorize</button>
 
+      </div>
     </div>
-  </div>
 
   </div>
 </body>
+
 </html>