Google Analytics Embed API használata Nuxt JS alatt

#vuejs #nuxtjs #analytics #embedapi

Google Analytics Embed API használata Nuxt JS alatt

Ha gyors látogatottsági vizualizációt akarunk megoldani a SPA-nk alatt, akkor az Analytics beilleszthető megoldása mindig jó választás. Viszont hogyan is működhet ez Vue JS alatt?

Konkrét példánkban Nuxt JS-t fogunk használni amit gyakorlatilag egy Vue JS on steroids. Egyéb hasznos kiegészítők mellett képes szerver oldali kód futtatására is a megfelelő környezetben, de ebbe most nem megyünk bele. Akit érdekel a téma, annak ajánlom figyelmébe a hivatalos dokumentációját1.

A megoldás áttekintése

A célunk az, hogy a Google Analytics-ben gyűjtött adatokat valamilyen grafikus formában megjelenítsük a felhasználóinknak az adminisztrációs felületükön. A legegyszerűbb megoldást fogjuk használni, a Google Analytics Embed API-ját2.

Viszont azt sem szeretnénk, ha az adatok megtekintéséhez minden alkalommal be kellene külön jelentkeztetni a felhasználót. Ezért a hozzáféréshez szükséges token-t szerver oldalon fogjuk legenerálni.

Így a lépések összefoglalva:

  1. Létrehozunk egy végpontot a szerver oldalon ahol elérési tokent tudunk generálni
  2. Létrehozunk egy plugin-t kliens oldalon ami beilleszti a Google Analytics kódot az oldalba
  3. Meghívjuk oldalbetöltéskor AJAX-on keresztül a token generálási interfészünk
  4. Ha rendelkezésre áll a token, akkor inicializáljuk a statisztikákat a kliens oldalon

Szerver oldali token generálás

Első lépésként hozzunk létre egy alkalmazást a Google Developer Konzol-on és engedélyezzük rajta az Analytics API-t.

Majd készítsünk hozzá egy service account elérést. Ha ezt nem ajánlja fel, akkor az IAM menüpontban ezt megtaláljuk. El ne felejtsük letölteni a JSON fájlt, erre szerver oldalon szükségünk lesz.

A service account-hoz tartozó email címet adjuk hozzá a Google Analytics nézetünkhoz. Read & Analyze jogok elegek az adatok eléréséhez.

Szerver oldalon ebben a példában PHP-t fogunk használni, de bármilyen backend nyelvvel megoldható a token generálás.

Composer-el telepítsük fel a Google lib-et.

composer require google/apiclient:^2.0

Majd a végpontunk létrehozásakor használjuk a következőképpen.

$client = new Google_Client();
// A letöltött JSON fáj útvonala
$client->setAuthConfig(__DIR__ . '/credentials.json');
$client->setScopes(['https://www.googleapis.com/auth/analytics.readonly']);
$client->refreshTokenWithAssertion();
$token = $this->client->getAccessToken();
echo $token['access_token'];

Ez természetesen egyszerűsített kód ami igény szerint bővíthető.

A Reporting API is hasonlóan működik és szintén ilyen eléréseket igényel. Ennek segítségével teljes jelentéseket tudunk varázsolni a backend-re további feldolgozásra.

Ennek a PHP implementációjáról többet olvashattok itt: Reporting API PHP Quickstart

Nuxt JS plugin készítése

Mezei Vue JS alatt közvetlen az index.html fájlt szerkeszthetnénk és annak tetejére beilleszthetnénk az Embed API kódját. Szerencsére Nuxt alatt kicsit elegánsabban tudjuk ezt kezelni plugin-ok készítésével.

Lépjünk a plugins könyvtárba és hozzunk létre egy gapi.js nevű fájlt. Majd töltsük fel a következő tartalommal.

export default () => {
 (function(w,d,s,g,js,fs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
  js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
  }(window,document,'script'));
}

Majd a nuxt.config.js fájlban adjuk hozzá a következőképpen.

plugins: [{ src: '~plugins/gapi.js', ssr: false }],

Ezzel az analytics lib az oldalunk része, most már csak használnunk kell.

Használjuk az Embed API-t

Nyissuk meg az oldalt reprezentáló koponensünket, ahol meg szeretnénk jeleníteni a diagramot és adjuk hozzá a következő AJAX lekérdezést betöltéskor.

mounted() {
    this.$store
      .dispatch('GET_TOKEN')
      .then(res => {
        this.initCharts(res.token)
      })
      .catch(err => {
        console.log(err)
      })
  },

A mounted metódus minden oldalbetöltéskor lefut. Ha csak egyszer szeretnénk futtatni munkafolyamatonként akkor használjuk a created metódust. 3

Mivel én state management-et is használok, ezért az AJAX lekérdezésem egy action-ként van hozzáadva. A fenti kódban azt hívom meg és kezelem a válaszát egy promise-al.4 De akár Vuex nélkül közvetlen itt is meghívható az AJAX lekérdezés például egy Axios-al.

Visszatérési értékként a hívott végpont visszaad egy tokent, amit a fenti példában az initCharts metódusnak adunk tovább paraméterként. Ez pedig így néz ki.

methods: {
    initCharts(token) {
      const gapi = window.gapi

      gapi.analytics.ready(() => {
        // Felhasználjuk a szerver oldali tokent
        gapi.analytics.auth.authorize({
          serverAuth: {
            access_token: token
          }
        })

        var dataChart1 = new gapi.analytics.googleCharts.DataChart({
          query: {
            ids: 'ga:11111111', // <-- Cseréld ki a nézeted azonosítójával
            'start-date': '30daysAgo',
            'end-date': 'yesterday',
            metrics: 'ga:sessions',
            dimensions: 'ga:date'
          },
          chart: {
            container: 'chart-1-container',
            type: 'LINE',
            options: {
              width: '100%'
            }
          }
        })
        dataChart1.execute()
      })
    }
  }

Így abban a pillanatban amikor már rendelkezésünkre áll a token, akkor inicializáljuk a diagramot. Viszont ez így nem működik még, mert szükséges, hogy a megadott id-val legyen egy elem a HTML-ben amihez hozzárendeli azt. Így ezt is adjuk hozzá a komponens template részéhez.

<div id="chart-1-container"/>

Ha mindent jól csináltunk, akkor sikeresen megjelent az oldalunk látogatottságának 30 napra visszamenő története. Innentől kezdve pedig már csak rajtunk múlik milyen okos komponenseket hozunk létre egy-egy diagramnak, amiket bárhol újra felhasználhatunk alkalmazásunkban.

További analytics okosságokért érdemes böngészgetni a hivatalos Reporting API dokumentáció Dimensions & Metrics Explorer részét és a Google Analytics Dev Tools oldalt.


További tartalmak