Filtering Search Console keywords

CHANGELOG.md

@@ -42,6 +42,7 @@ All notable changes to this project will be documented in this file.
 - Add Yesterday as an time range option in the dashboard
 - Add support for importing Google Analytics 4 data
 - Import custom events from Google Analytics 4
+- Ability to filter Search Console keywords by page, country and device plausible/analytics#4077
 
 ### Removed
 - Removed the nested custom event property breakdown UI when filtering by a goal in Goal Conversions

assets/js/dashboard/stats/modals/exit-pages.js

@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
 
 import Modal from './modal'
 import * as api from '../../api'
-import numberFormatter from '../../util/number-formatter'
+import numberFormatter, {percentageFormatter} from '../../util/number-formatter'
 import { parseQuery } from '../../query'
 import { trimURL } from '../../util/url'
 class ExitPagesModal extends React.Component {
@@ -34,14 +34,6 @@ class ExitPagesModal extends React.Component {
  this.setState({ loading: true, page: this.state.page + 1 }, this.loadPages.bind(this))
  }
 
- formatPercentage(number) {
- if (typeof (number) === 'number') {
- return number + '%'
- } else {
- return '-'
- }
- }
-
  showConversionRate() {
  return !!this.state.query.filters.goal
  }
@@ -74,7 +66,7 @@ class ExitPagesModal extends React.Component {
  {this.showConversionRate() && <td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.total_visitors)}</td>}
  <td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.visitors)}</td>
  {this.showExtra() && <td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.visits)}</td>}
- {this.showExtra() && <td className="p-2 w-32 font-medium" align="right">{this.formatPercentage(page.exit_rate)}</td>}
+ {this.showExtra() && <td className="p-2 w-32 font-medium" align="right">{percentageFormatter(page.exit_rate)}</td>}
  {this.showConversionRate() && <td className="p-2 w-32 font-medium" align="right">{numberFormatter(page.conversion_rate)}%</td>}
  </tr>
  )

assets/js/dashboard/stats/modals/google-keywords.js

@@ -3,7 +3,7 @@ import { Link, withRouter } from 'react-router-dom'
 
 import Modal from './modal'
 import * as api from '../../api'
-import numberFormatter from '../../util/number-formatter'
+import numberFormatter, { percentageFormatter } from '../../util/number-formatter'
 import {parseQuery} from '../../query'
 import RocketIcon from './rocket-icon'
 
@@ -17,49 +17,31 @@ class GoogleKeywordsModal extends React.Component {
  }
 
  componentDidMount() {
- if (this.state.query.filters.goal) {
- api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/goal/referrers/Google`, this.state.query, {limit: 100})
- .then((res) => this.setState({
- loading: false,
- searchTerms: res.search_terms,
- totalVisitors: res.total_visitors,
- notConfigured: res.not_configured,
- isOwner: res.is_owner
- }))
- } else {
- api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/referrers/Google`, this.state.query, {limit: 100})
- .then((res) => this.setState({
- loading: false,
- searchTerms: res.search_terms,
- totalVisitors: res.total_visitors,
- notConfigured: res.not_configured,
- isOwner: res.is_owner
- }))
- }
+ api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/referrers/Google`, this.state.query, {limit: 100})
+ .then((res) => this.setState({
+ loading: false,
+ searchTerms: res.search_terms,
+ notConfigured: res.not_configured,
+ isOwner: res.is_owner
+ }))
  }
 
  renderTerm(term) {
  return (
  <React.Fragment key={term.name}>
-
  <tr className="text-sm dark:text-gray-200" key={term.name}>
- <td className="p-2 truncate">{term.name}</td>
+ <td className="p-2">{term.name}</td>
  <td className="p-2 w-32 font-medium" align="right">{numberFormatter(term.visitors)}</td>
+ <td className="p-2 w-32 font-medium" align="right">{numberFormatter(term.impressions)}</td>
+ <td className="p-2 w-32 font-medium" align="right">{percentageFormatter(term.ctr)}</td>
+ <td className="p-2 w-32 font-medium" align="right">{numberFormatter(term.position)}</td>
  </tr>
  </React.Fragment>
  )
  }
 
  renderKeywords() {
- if (this.state.query.filters.goal) {
- return (
- <div className="text-center text-gray-700 dark:text-gray-300 mt-6">
- <RocketIcon />
- <div className="text-lg">Sorry, we cannot show which keywords converted best for goal <b>{this.state.query.filters.goal}</b></div>
- <div className="text-lg">Google does not share this information</div>
- </div>
- )
- } else if (this.state.notConfigured) {
+ if (this.state.notConfigured) {
  if (this.state.isOwner) {
  return (
  <div className="text-center text-gray-700 dark:text-gray-300 mt-6">
@@ -84,7 +66,10 @@ class GoogleKeywordsModal extends React.Component {
  <thead>
  <tr>
  <th className="p-2 w-48 md:w-56 lg:w-1/3 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="left">Search Term</th>
- <th className="p-2 w-32 lg:w-1/2 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Visitors</th>
+ <th className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Visitors</th>
+ <th className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Impressions</th>
+ <th className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">CTR</th>
+ <th className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">Position</th>
  </tr>
  </thead>
  <tbody>
@@ -102,14 +87,6 @@ class GoogleKeywordsModal extends React.Component {
  }
  }
 
- renderGoalText() {
- if (this.state.query.filters.goal) {
- return (
- <h1 className="text-xl font-semibold text-gray-500 dark:text-gray-200 leading-none">completed {this.state.query.filters.goal}</h1>
- )
- }
- }
-
  renderBody() {
  if (this.state.loading) {
  return (
@@ -122,10 +99,6 @@ class GoogleKeywordsModal extends React.Component {
 
  <div className="my-4 border-b border-gray-300 dark:border-gray-500"></div>
  <main className="modal__content">
- <h1 className="text-xl font-semibold mb-0 leading-none dark:text-gray-200">
- {this.state.totalVisitors} visitors from Google<br />
- </h1>
- {this.renderGoalText()}
  { this.renderKeywords() }
  </main>
  </React.Fragment>

assets/js/dashboard/stats/sources/search-terms.js

@@ -39,7 +39,8 @@ export default class SearchTerms extends React.Component {
  loading: false,
  searchTerms: res.search_terms || [],
  notConfigured: res.not_configured,
- isAdmin: res.is_admin
+ isAdmin: res.is_admin,
+ unsupportedFilters: res.unsupported_filters
  })).catch((error) =>
  {
  this.setState({ loading: false, searchTerms: [], notConfigured: true, error: true, isAdmin: error.payload.is_admin })
@@ -68,21 +69,19 @@ export default class SearchTerms extends React.Component {
  }
 
  renderList() {
-  if (this.props.query.filters.goal) {
+ if (this.state.unsupportedFilters)  {
  return (
  <div className="text-center text-gray-700 dark:text-gray-300 text-sm mt-20">
  <RocketIcon />
- <div>Sorry, we cannot show which keywords converted best for goal <b>{this.props.query.filters.goal}</b></div>
- <div>Google does not share this information</div>
+ <div>Unable to fetch keyword data from Search Console because it does not support the current set of filters</div>
  </div>
  )
-
  } else if (this.state.notConfigured) {
  return (
  <div className="text-center text-gray-700 dark:text-gray-300 text-sm mt-20">
  <RocketIcon />
  <div>
- This site is not connected to Search Console so we cannot show the search phrases.
+ This site is not connected to Search Console so we cannot show the search terms
  {this.state.isAdmin && this.state.error && <><br/><br/><p>Please click below to connect your Search Console account.</p></>}
  </div>
  {this.state.isAdmin && <a href={`/${encodeURIComponent(this.props.site.domain)}/settings/integrations`} className="button mt-4">Connect with Google</a> }
@@ -103,9 +102,8 @@ export default class SearchTerms extends React.Component {
  )
  } else {
  return (
- <div className="text-center text-gray-700 dark:text-gray-300 text-sm mt-20">
- <RocketIcon />
- <div>No search terms were found for this period. Please adjust or extend your time range. Check <a href="https://plausible.io/docs/google-search-console-integration#i-dont-see-google-search-query-data-in-my-dashboard" target="_blank" rel="noreferrer" className="hover:underline text-indigo-700 dark:text-indigo-500">our documentation</a> for more details.</div>
+ <div className="text-center text-gray-700 dark:text-gray-300 ">
+ <div className="mt-44 mx-auto font-medium text-gray-500 dark:text-gray-400">No data yet</div>
  </div>
  )
  }

assets/js/dashboard/util/number-formatter.js

@@ -49,3 +49,11 @@ export function durationFormatter(duration) {
  return `${seconds}s`
  }
 }
+
+export function percentageFormatter(number) {
+ if (typeof (number) === 'number') {
+ return number + '%'
+ } else {
+ return '-'
+ }
+}

fixture/http_mocks/google_analytics_stats.json

@@ -4,7 +4,7 @@
  "url": "https://www.googleapis.com/webmasters/v3/sites/sc-domain%3Adummy.test/searchAnalytics/query",
  "method": "post",
  "request_body": {
- "dimensionFilterGroups": {},
+ "dimensionFilterGroups": [],
  "dimensions": [
  "query"
  ],
@@ -16,26 +16,20 @@
  "responseAggregationType": "auto",
  "rows": [
  {
- "clicks": 25.0,
- "ctr": 0.3,
- "impressions": 50.0,
- "keys": [
- "keyword1",
- "keyword2"
- ],
- "position": 2.0
+ "clicks": 25,
+ "ctr": 0.3679,
+ "impressions": 50,
+ "keys": ["keyword1"],
+ "position": 2.2312312
  },
  {
- "clicks": 15.0,
+ "clicks": 15,
  "ctr": 0.5,
- "impressions": 25.0,
- "keys": [
- "keyword3",
- "keyword4"
- ],
+ "impressions": 25,
+ "keys": ["keyword3"],
  "position": 4.0
  }
  ]
  }
  }
-]
+]

lib/plausible/google/api.ex

@@ -6,6 +6,7 @@ defmodule Plausible.Google.API do
  use Timex
 
  alias Plausible.Google.HTTP
+ alias Plausible.Google.SearchConsole
 
  require Logger
 
@@ -74,21 +75,26 @@ defmodule Plausible.Google.API do
  end
 
  def fetch_stats(site, %{filters: %{} = filters, date_range: date_range}, limit) do
- with site <- Plausible.Repo.preload(site, :google_auth),
+ with {:ok, site} <- ensure_search_console_property(site),
  {:ok, access_token} <- maybe_refresh_token(site.google_auth),
+ {:ok, search_console_filters} <-
+ SearchConsole.Filters.transform(site.google_auth.property, filters),
  {:ok, stats} <-
  HTTP.list_stats(
  access_token,
  site.google_auth.property,
  date_range,
  limit,
- filters["page"]
+ search_console_filters
  ) do
  stats
  |> Map.get("rows", [])
- |> Enum.filter(fn row -> row["clicks"] > 0 end)
- |> Enum.map(fn row -> %{name: row["keys"], visitors: round(row["clicks"])} end)
+ |> Enum.map(&search_console_row/1)
  |> then(&{:ok, &1})
+ else
+ :google_property_not_configured -> {:error, :google_property_not_configured}
+ :unsupported_filters -> {:error, :unsupported_filters}
+ {:error, error} -> {:error, error}
  end
  end
 
@@ -142,6 +148,44 @@ defmodule Plausible.Google.API do
  Timex.before?(expires_at, thirty_seconds_ago)
  end
 
+ defp ensure_search_console_property(site) do
+ site = Plausible.Repo.preload(site, :google_auth)
+
+ if site.google_auth && site.google_auth.property do
+ {:ok, site}
+ else
+ :google_property_not_configured
+ end
+ end
+
+ defp search_console_row(row) do
+ %{
+ # We always request just one dimension at a time (`query`)
+ name: row["keys"] |> List.first(),
+ visitors: row["clicks"],
+ impressions: row["impressions"],
+ ctr: rounded_ctr(row["ctr"]),
+ position: rounded_position(row["position"])
+ }
+ end
+
+ defp rounded_ctr(ctr) do
+ {:ok, decimal} = Decimal.cast(ctr)
+
+ decimal
+ |> Decimal.mult(100)
+ |> Decimal.round(1)
+ |> Decimal.to_float()
+ end
+
+ defp rounded_position(position) do
+ {:ok, decimal} = Decimal.cast(position)
+
+ decimal
+ |> Decimal.round(1)
+ |> Decimal.to_float()
+ end
+
  defp client_id() do
  Keyword.fetch!(Application.get_env(:plausible, :google), :client_id)
  end