[Continued] Google Analytics import

assets/js/dashboard/api.js

@@ -42,6 +42,7 @@ export function serializeQuery(query, extraQuery=[]) {
   if (query.from)    { queryObj.from = formatISO(query.from)  }
   if (query.to)      { queryObj.to = formatISO(query.to)  }
   if (query.filters) { queryObj.filters = serializeFilters(query.filters)  }
+  if (query.with_imported) { queryObj.with_imported = query.with_imported  }
   if (SHARED_LINK_AUTH) { queryObj.auth = SHARED_LINK_AUTH }
   Object.assign(queryObj, ...extraQuery)
 

assets/js/dashboard/query.js

@@ -23,6 +23,7 @@ export function parseQuery(querystring, site) {
     date: q.get('date') ? parseUTCDate(q.get('date')) : nowForSite(site),
     from: q.get('from') ? parseUTCDate(q.get('from')) : undefined,
     to: q.get('to') ? parseUTCDate(q.get('to')) : undefined,
+    with_imported: q.get('with_imported') ? q.get('with_imported') === 'true' : true,
     filters: {
       'goal': q.get('goal'),
       'props': JSON.parse(q.get('props')),

assets/js/dashboard/stats/visitor-graph.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom'
+import { withRouter, Link } from 'react-router-dom'
 import Chart from 'chart.js/auto';
 import { navigateToQuery } from '../query'
 import numberFormatter, {durationFormatter} from '../util/number-formatter'
 import * as api from '../api'
 import LazyLoader from '../components/lazy-loader'
+import * as url from '../util/url'
 
 function buildDataSet(plot, present_index, ctx, label) {
   var gradient = ctx.createLinearGradient(0, 0, 0, 300);
@@ -316,17 +317,19 @@ class LineGraph extends React.Component {
 
       if (this.state.exported) {
         return (
-          <svg className="animate-spin h-4 w-4 text-indigo-500 absolute -top-8 right-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          </svg>
+          <div className="flex-auto w-4 h-4">
+            <svg className="animate-spin h-4 w-4 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          </div>
         )
       } else {
         const endpoint = `/${encodeURIComponent(this.props.site.domain)}/export${api.serializeQuery(this.props.query)}`
 
         return (
-          <a href={endpoint} download onClick={this.downloadSpinner.bind(this)}>
-            <svg className="absolute w-4 h-5 text-gray-700 feather dark:text-gray-300 -top-8 right-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+          <a className="flex-auto w-4 h-4" href={endpoint} download onClick={this.downloadSpinner.bind(this)}>
+            <svg className="absolute text-gray-700 feather dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
           </a>
         )
       }
@@ -338,15 +341,36 @@ class LineGraph extends React.Component {
 
     if (samplePercent < 100) {
       return (
-        <div tooltip={`Stats based on a ${samplePercent}% sample of all visitors`} className="absolute cursor-pointer -top-8 right-14 lg:-top-20 lg:right-8">
-          <svg className="w-4 h-4 text-gray-300 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <div tooltip={`Stats based on a ${samplePercent}% sample of all visitors`} className="cursor-pointer flex-auto w-4 h-4">
+          <svg className="absolute w-4 h-4 text-gray-300 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
         </div>
       )
     }
   }
 
+  importedNotice() {
+    const source = this.props.graphData.imported_source;
+
+    if (source) {
+      const withImported = this.props.graphData.with_imported;
+      const strike = withImported ? "" : " line-through"
+      const target =  url.setQuery('with_imported', !withImported)
+      const tip = withImported ? "" : "do not ";
+
+      return (
+        <Link to={target} className="w-4 h-4">
+          <div tooltip={`Stats ${tip}include data imported from ${source}.`} className="cursor-pointer flex-auto w-4 h-4">
+            <svg className="absolute text-gray-300 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <text x="4" y="18" fontSize="24" fill="currentColor" className={"text-gray-700 dark:text-gray-300" + strike}>{ source[0].toUpperCase() }</text>
+            </svg>
+          </div>
+        </Link>
+      )
+    }
+  }
+
   render() {
     const extraClass = this.props.graphData.interval === 'hour' ? '' : 'cursor-pointer'
 
@@ -356,8 +380,11 @@ class LineGraph extends React.Component {
           { this.renderTopStats() }
         </div>
         <div className="relative px-2">
-          { this.downloadLink() }
-          { this.samplingNotice() }
+          <div className="absolute right-2 -top-5 lg:-top-20 lg:w-6 w-16 lg:h-20 flex lg:flex-col flex-row">
+            { this.downloadLink() }
+            { this.samplingNotice() }
+            { this.importedNotice() }
+          </div>
           <canvas id="main-graph-canvas" className={'mt-4 ' + extraClass} width="1054" height="342"></canvas>
         </div>
       </div>

config/.env.dev

@@ -12,4 +12,7 @@ SHOW_CITIES=true
 PADDLE_VENDOR_AUTH_CODE=895e20d4efaec0575bb857f44b183217b332d9592e76e69b8a
 PADDLE_VENDOR_ID=3942
 
+GOOGLE_CLIENT_ID=875387135161-l8tp53dpt7fdhdg9m1pc3vl42si95rh0.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+
 IP_GEOLOCATION_DB=/home/ukutaht/plausible/analytics/city_database.mmdb

config/runtime.exs

@@ -320,7 +320,8 @@ if config_env() == :prod && !disable_cron do
     check_stats_emails: 1,
     site_setup_emails: 1,
     clean_email_verification_codes: 1,
-    clean_invitations: 1
+    clean_invitations: 1,
+    google_analytics_imports: 1
   ]
 
   extra_queues = [
@@ -340,7 +341,7 @@ if config_env() == :prod && !disable_cron do
 else
   config :plausible, Oban,
     repo: Plausible.Repo,
-    queues: false,
+    queues: [google_analytics_imports: 1],
     plugins: false
 end
 

lib/plausible/clickhouse_repo.ex

@@ -17,4 +17,22 @@ defmodule Plausible.ClickhouseRepo do
     Ecto.Adapters.SQL.query!(__MODULE__, events_sql, [domain])
     Ecto.Adapters.SQL.query!(__MODULE__, sessions_sql, [domain])
   end
+
+  def clear_imported_stats_for(site_id) do
+    [
+      "imported_visitors",
+      "imported_sources",
+      "imported_pages",
+      "imported_entry_pages",
+      "imported_exit_pages",
+      "imported_locations",
+      "imported_devices",
+      "imported_browsers",
+      "imported_operating_systems"
+    ]
+    |> Enum.map(fn table ->
+      sql = "ALTER TABLE #{table} DELETE WHERE site_id = ?"
+      Ecto.Adapters.SQL.query!(__MODULE__, sql, [site_id])
+    end)
+  end
 end