Usare le Google Search Console API in Vue.js

  • Vue.js
  • Gabriele Romanato

In questo articolo vedremo come integrare le Google Search Console API in Vue.js utilizzando il flusso di autenticazione fornito dal client delle API.

Occorre innanzitutto ottenere un Client ID creando delle credenziali OAuth di tipo Web application nella console delle API di Google. Dobbiamo anche abilitare le origini da cui poter effettuare le richieste e specificare lo scope corretto per le API, ossia https://www.googleapis.com/auth/webmasters.readonly.

In Vue, inseriamo le credenziali nel file .env:

VITE_GOOGLE_CLIENT_ID=ID.apps.googleusercontent.com
VITE_GOOGLE_SCOPES=https://www.googleapis.com/auth/webmasters.readonly

Modifichiamo il file index.html inserendo lo script delle API nell'elemento head:

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://accounts.google.com/gsi/client"></script>
    <title>Vite App</title>
</head>

Definiamo a questo punto una funzione che istanzia il client delle API e salviamo nel web storage il token di accesso ottenuto dopo aver accettato il prompt OAuth.

// src/api/google.js

export function getClient() {
  const tokenClient = google.accounts.oauth2.initTokenClient({
    client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
    scope: import.meta.env.VITE_GOOGLE_SCOPES,
    prompt: 'consent',
    callback: (resp) => {
      if (resp && resp.access_token) {
        localStorage.setItem('google-access-token', resp.access_token);
      } else {
        localStorage.setItem('google-access-token', '');
      }
    },
  });
  return tokenClient;
}

Per lanciare il prompt OAuth del browser occorre usare un metodo specifico del client:

import { getClient } from '@/api/google';

const tokenClient = getClient();

const handleRequestAccess = () => {
    tokenClient.requestAccessToken({ prompt: 'consent' });
};

Una volta ottenuto il token, possiamo definire una funzione per effettuare le query alle API:

// src/api/google.js

export async function runQuery(domain = 'example.com', dimension = 'query', start = null, end = null) {
  try {
    const accessToken = localStorage.getItem('google-access-token');
    const siteURL = 'sc-domain:' + domain;

    const endpoint =
      'https://www.googleapis.com/webmasters/v3/sites/' +
      encodeURIComponent(siteURL) +
      '/searchAnalytics/query';

    const startDate = start instanceof Date ? start.toISOString().slice(0, 10) :  new Date(Date.now() - 28 * 24 * 3600 * 1000)
        .toISOString()
        .slice(0, 10);
    const endDate = end instanceof Date ? end.toISOString().slice(0, 10) :  new Date().toISOString().slice(0, 10);

    const body = {
      startDate: startDate,
      endDate: endDate,
      dimensions: [dimension],
      rowLimit: 20,
    };

    if(dimension === 'page') {
        body.searchType = 'web';
    }

    const res = await fetch(endpoint, {
      method: 'POST',
      headers: {
        Authorization: 'Bearer ' + accessToken,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    });

    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      throw new Error(
        res.status + ' ' + res.statusText + ' — ' + JSON.stringify(err)
      );
    }

    const data = await res.json();
    return data.rows || []; 
  } catch (e) {
    return [];
  }
}

I dati analitici vengono restituiti nell'array rows. Il dominio passato come primo paramentro non deve essere un URL ma un nome a dominio per non incorrere in problemi di ownership e autorizzazione. Per ottenere risultati coerenti e affidabili occorre scegliere un range di date (inizio e fine del periodo) significativo.

Conclusione

Le Google Search Console API sono un ottimo strumento per monitorare e analizzare la performance dei nostri siti sulle SERP di Google ed è relativamente semplice integrarle in Vue.js.

Torna su