analytics/lib/plausible_web/templates/site/settings_search_console.html.eex

<div class="shadow bg-white sm:rounded-md sm:overflow-hidden py-6 px-4 sm:p-6">
  <header class="relative">
    <h2 class="text-lg leading-6 font-medium text-gray-900">Google Search Console integration</h2>
    <p class="mt-1 text-sm leading-5 text-gray-500">You can integrate with Google Search Console to get all of your important search results stats such as keyword phrases people find your site with.</p>
    <%= link(to: "https://docs.plausible.io/google-search-console-integration/", target: "_blank") do %>
      <svg class="w-6 h-6 absolute top-0 right-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
    <% end %>
  </header>

  <%= if @site.google_auth do %>
    <div class="py-2"></div>
    <span class="text-gray-700">Linked Google account: <b><%= @site.google_auth.email %></b></span>

    <%= link("Unlink Google account", to: "/#{URI.encode_www_form(@site.domain)}/settings/google", class: "inline-block mt-4 px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-red-700 bg-white hover:text-red-500 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150", method: "delete") %>

    <%= case @search_console_domains do %>
      <% {:ok, domains} -> %>
        <%= if @site.google_auth.property && !(@site.google_auth.property in domains) do %>
          <p class="text-gray-700 mt-6 font-bold">
          NB: Your Google account does not have access to your currently configured property, <%= @site.google_auth.property %>. Please select a verified property from the list below.
          </p>
        <% else %>
          <p class="text-gray-700 mt-6">
          Select the Google Search Console property you would like to pull keyword data from. If you don't see your domain, <%= link("set it up and verify", to: "https://docs.plausible.io/google-search-console-integration", class: "text-indigo-500") %> on Search Console first.
          </p>
        <% end %>

        <%= form_for Plausible.Site.GoogleAuth.changeset(@site.google_auth), "/#{URI.encode_www_form(@site.domain)}/settings/google", [class: "max-w-xs"], fn f -> %>
          <div class="my-6">
            <div class="inline-block relative w-full">
              <%= select f, :property, domains, prompt: "(Choose property)", class: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" %>
            </div>
          </div>

          <%= submit "Save", class: "button" %>
        <% end %>
        <% {:error, error} -> %>
          <p class="text-gray-700 mt-6">The following error happened when fetching your Google Search Console domains.</p>
          <p class="text-red-700 font-medium mt-3"><%= error %></p>
        <% end %>
      <% else %>
        <%= button("Continue with Google", to: Plausible.Google.Api.authorize_url(@site.id), class: "button mt-8") %>

        <div class="text-gray-700 mt-8">
          NB: You also need to set up your site on <%= link("Google Search Console", to: "https://search.google.com/search-console/about") %> for the integration to work. <%= link("Read the docs", to: "https://docs.plausible.io/google-search-console-integration", class: "text-indigo-500") %>
        </div>
      <% end %>
</div>