Cara membuat laporan mingguan Google Analytics yang diposting ke Slack – Beragampengetahuan

Google Analytics memang bagus, namun tidak semua orang di organisasi Anda akan diberikan akses. Di banyak tempat saya bekerja, hal ini didasarkan pada “kebutuhan untuk mengetahui”.

Dalam artikel ini, saya akan membahasnya dan menunjukkan kepada Anda bagaimana saya menulis Tindakan GitHub untuk menanyakan Google Analytics, membuat daftar sepuluh besar halaman yang paling banyak dilihat di situs saya selama 7 hari terakhir, dan membandingkannya hingga 7 hari terakhir Beri tahu saya halaman mana yang mengalami peningkatan penayangan, halaman mana yang mengalami penurunan, halaman mana yang tetap sama, dan halaman mana yang baru dalam daftar.

Laporan tersebut kemudian diformat dengan baik dengan indikator ikon dan diposting ke saluran publik Slack setiap hari Jumat pukul 10 pagi.

Data yang muncul ini tidak hanya berguna bagi mereka yang mungkin membutuhkannya; Cara mudah untuk menyalin dan menempel atau Laporkan tangkapan layar Dan tambahkan ke slide pertemuan mingguan perusahaan/departemen Anda.

Ini adalah tampilan laporan yang telah selesai di Slack, dan di bawah ini Anda akan menemukan tautan ke repositori GitHub.

GitHub

Untuk menggunakan repositori ini, ikuti langkah-langkah yang diuraikan dalam file readme.

Prasyarat

Untuk membangun alur kerja ini, Anda perlu Akses administrator ke akun Google Analytics dan Slack Anda dan Hak administrator Rahasia untuk Tindakan GitHub dan repositori GitHub.

Laporan dan tindakan khusus

Tentu saja, semua kode dapat diubah sesuai kebutuhan Anda, dan di bagian berikut saya akan menjelaskan area yang mungkin ingin Anda lihat.

Sesuaikan tindakan GitHub

Nama file untuk Action week-analytics.report.yml tidak akan terlihat di mana pun kecuali di kode/repositori, tetapi tentu saja, ubahlah sesuai keinginan Anda dan Anda tidak akan merusak apa pun.

ini name Dan jobs: Nama detailnya di bawah ini dapat dilihat di UI GitHub dan log alur kerja.

ini cron Sintaksnya menentukan kapan Aksi dijalankan. Penjadwalan menggunakan sintaks cron POSIX, dan dengan mengubah nomor Anda dapat menentukan kapan operasi berjalan.

Anda juga dapat mengubah nama variabel rahasia; pastikan untuk memperbaruinya di repositori mendirikan.

# .github/workflows/weekly-analytics-report.yml

name: Weekly Analytics Report

on:
  schedule:
    - cron: '0 10 * * 5' # Runs every Friday at 10 AM UTC
  workflow_dispatch: # Allows manual triggering

jobs:
  analytics-report:
    runs-on: ubuntu-latest

    env:
      SLACK_WEBHOOK_URL: $
      GA4_PROPERTY_ID: $
      GOOGLE_APPLICATION_CREDENTIALS_BASE64: $

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'

      - name: Install dependencies
        run: npm install

      - name: Run the JavaScript script
        run: node src/services/weekly-analytics.js

Sesuaikan laporan Google Analytics

Permintaan API Google Analytics yang saya gunakan disetel untuk ditarik fullPageUrl Dan pageTitle untuk totalUsers permintaan selama 7 hari terakhir, dan permintaan kedua selama 7 hari sebelumnya, lalu jumlahkan totalnya dan batasi tanggapan menjadi 10.

Anda dapat membuat kueri Anda sendiri menggunakan GA4 Query Explorer Google, lalu menggantinya requests.

// src/services/weekly-analytics.js#L75

const [thisWeek] = await analyticsDataClient.runReport(
  property: `properties/$process.env.GA4_PROPERTY_ID`,
  dateRanges: [
    
      startDate: '7daysAgo',
      endDate: 'today',
    ,
  ],
  dimensions: [
    
      name: 'fullPageUrl',
    ,
    
      name: 'pageTitle',
    ,
  ],
  metrics: [
    
      name: 'totalUsers',
    ,
  ],
  limit: reportLimit,
  metricAggregations: ['MAXIMUM'],
);

Buat perbandingan

Ada dua fungsi yang menentukan tampilan halaman mana yang bertambah, berkurang, tetap sama, atau baru.

Yang pertama adalah fungsi pengurangan sederhana yang mengembalikan URL dan jumlah untuk setiap URL.

const lastWeekMap = lastWeekResults.reduce((items, item) => 
  const  url, count  = item;
  items[url] = count;
  return items;
, );

Peta kedua memplot hasil minggu ini dan membandingkannya dengan minggu lalu.

// Generate the report for this week
const report = thisWeekResults.map((item, index) => 
  const  url, title, count  = item;
  const lastWeekCount = lastWeekMap[url];
  const status = determineStatus(count, lastWeekCount);

  return 
    position: (index + 1).toString().padStart(2, '0'), // Format the position with leading zero if it's less than 10
    url,
    title,
    count: , // Ensure lastWeekCount is displayed as '0' if not found
    status,
  ;
);

Fungsi terakhir digunakan untuk menentukan status setiap fungsi.

// Function to determine the status
const determineStatus = (count, lastWeekCount) => 
  const thisCount = Number(count);
  const previousCount = Number(lastWeekCount);

  if (lastWeekCount === undefined ;

Saya sengaja membuat kodenya cukup bertele-tele agar Anda bisa lebih mudah menambahkannya console.log Lihatlah setiap fungsi untuk melihat apa yang dikembalikannya.

Sesuaikan pesan Slack

Konfigurasi pesan Slack yang saya gunakan membuat judul dengan emoji, pemisah, dan paragraf yang menjelaskan isi pesan.

Di bawah ini, saya menggunakan objek konteks untuk membuat laporan dengan mengulangi perbandingan dan mengembalikan objek yang berisi sintaks pesan khusus Slack, yang mencakup ikon, jumlah, nama halaman, dan tautan untuk setiap item.

Anda dapat membuat format pesan Anda sendiri menggunakan Block Kit Builder dari Slack.

// src/services/weekly-analytics.js#151 

    const slackList = report.map((item, index) => {
      const 
        position,
        url,
        title,
        count:  thisWeek, lastWeek ,
        status,
       = item;

      return 
        type: 'context',
        elements: [
          
            type: 'image',
            image_url: $reportConfig.url/images/$status,
            alt_text: 'icon',
          ,
           *\$x$thisWeek`* / x$lastWeek`,
          ,
        ],
      ;
    });

Sebelum menjalankan Tindakan GitHub, Anda perlu menyelesaikan serangkaian operasi Google, relaksasiDan GitHub melangkah.

Siap berangkat?

Buat proyek Google Cloud

Buka konsol Google Cloud Anda dan klik dari menu drop-down di bagian atas layar Pilih proyekketika modal terbuka, klik proyek baru.

Nama proyek

Di layar berikutnya, beri nama proyek Anda dan klik membuat. Dalam contoh saya, saya memberi nama proyek tersebut Analisis mingguan yang bagus.

Aktifkan API dan layanan

Pada langkah ini, Anda akan mengaktifkan API Data Google Analytics untuk proyek baru Anda. Navigasi dari beragampengetahuan kiri ke API dan layanan > Aktifkan API dan layanan. Di bagian atas layar, klik + Aktifkan API dan layanan.

Aktifkan API Data Google Analytics

mencari”API Data Google Analytics,” pilih dari daftar dan klik memungkinkan.

Buat kredensial untuk API Data Google Analytics

Setelah mengaktifkan API di proyek Anda, kini Anda dapat membuat kredensial yang diperlukan. klik Buat kredensial Tombol di sudut kanan atas layar menyiapkan akun layanan baru.

Akun layanan memungkinkan “aplikasi” berinteraksi dengan Google API, memberikan kredensial yang berisi layanan yang diperlukan. Dalam contoh ini, kredensial memberikan akses ke Google Analytics Data API.

Jenis kredensial akun layanan

Di layar berikutnya, pilih API Data Google Analytics Netralkan dari menu drop-down data aplikasilalu klik Berikutnya.

Detail akun layanan

Di layar berikutnya, berikan akun layanan Anda Nama, PENGENALDan menggambarkan (Pilihan). Lalu klik Buat dan lanjutkan.

Dalam contoh saya, saya memberi nama dan ID pada akun layanan Analisis mingguan yang bagus Dan ditambahkan deskripsi singkat untuk menjelaskan tujuan dari akun layanan.

Peran akun layanan

Di layar berikutnya, pilih pemilik untuk Peranlalu klik melanjutkan.

Akun layanan selesai

Anda dapat mengosongkan kolom pada langkah terakhir dan klik menyelesaikan Ketika Anda siap.

kunci akun layanan

Pilih dari navigasi kiri akun layananlalu klikLebih banyak poin” Buka menu dan pilih Kelola kunci.

Kunci tambahan akun layanan

Di layar berikutnya, temukan tombol tab di bagian atas layar dan klik Tambahkan kunci dan pilih Buat kunci baru.

Kunci unduhan akun layanan

Di layar berikutnya, pilih JSON sebagai tipe kunci dan klik membuat Unduh kredensial aplikasi Google Anda .json dokumen.

Kredensial Aplikasi Google

Jika Anda membuka .json Jika Anda membuka file di editor kode, Anda akan melihat sesuatu yang mirip dengan berikut ini.

Jika Anda bertanya-tanya, tidak, Anda tidak dapat menggunakan objek seperti yang didefinisikan di .env dokumen. Untuk menggunakan kredensial ini, seluruh file perlu dikonversi ke string Base64.

catatan: Saya telah menulis artikel yang lebih mendetail tentang cara menggunakan kredensial Google App sebagai variabel lingkungan di sini: “Cara menggunakan kredensial Google Apps.json dalam variabel lingkungan.”

Jalankan perintah berikut dari terminal Anda: ganti Kredit nama file.json dan namamu .json dokumen.

cat name-of-creds-file.json | base64

Jika Anda telah mengkloning repositori dan mengikuti langkah-langkah memulai di readme, tambahkan string base64 yang dikembalikan setelah menjalankan perintah di atas dan tambahkan ke GOOGLE_APPLICATION_CREDENTIALS_BASE64 variabel Anda .env file, tapi pastikan untuk mengapit string dalam tanda kutip ganda.

GOOGLE_APPLICATION_CREDENTIALS_BASE64="abc123"

Ini menyelesaikan pekerjaan pada proyek Google. Langkah selanjutnya adalah menambahkan email akun layanan Anda ke aset Google Analytics Anda dan menemukan Google Analytics Anda Nomor properti.

Properti Google Analytics

Meskipun akun layanan Anda sekarang memiliki akses ke API Data Google Analytics, akun layanan tersebut belum memiliki akses ke akun Google Analytics Anda.

Dapatkan ID atribut Google Analytics

Untuk menanyakan API Google Analytics, Anda perlu mengetahui Nomor properti. Anda dapat menemukannya dengan masuk ke akun Google Analytics Anda. Pastikan Anda menggunakan properti yang benar (pada tangkapan layar di bawah saya memilih paulie.dev — GA4).

Klik pada Admin gigi sudut kiri bawah layar dan klik Detail properti.

Di layar berikutnya Anda akan melihat nomor properti di sudut kanan atas. Jika Anda telah mengkloning repositori dan mengikuti langkah-langkah memulai di readme, tambahkan nilai ID properti ke dalamnya GA4_PROPERTY_ID variabel Anda .env dokumen.

Tambahkan email pelanggan ke Google Analytics

Dari kredensial aplikasi Google .json File yang Anda unduh sebelumnya ditemukan client_email dan salin alamat emailnya.

Dalam contoh saya, tampilannya seperti ini: smashing-weekly-analytics@smashing-weekly-analytics.iam.gserviceaccount.com.

Sekarang navigasikan ke Manajemen akses properti Sembunyikan navigasi samping dari kiri dan klik + lalu klik Tambahkan pengguna.

Di layar berikutnya, tambahkan Email pelanggan tiba alamat email Masuk, hapus centang Beri tahu pengguna baru melalui emaillalu pilih hadirin di bawah Peran langsung dan batasan datalalu klik Tambahkan ke.

Ini melengkapi bagian properti Google Analytics. “Aplikasi” Anda akan menggunakan kredensial aplikasi Google yang berisi Email pelanggan Akun Google Analytics Anda sekarang dapat diakses melalui API Data Google Analytics.

Saluran kendur dan webhook

Pada langkah-langkah berikut, Anda membuat saluran Slack baru yang menggunakan webhook Slack untuk memposting pesan yang dikirim dari Aplikasi.

Buat saluran Slack

Buat saluran baru di ruang kerja Slack. Saya telah memberikan nama saya #Laporan analisis mingguan. Sebelum melanjutkan ke langkah berikutnya, Anda perlu mengaturnya.

Buat aplikasi Slack

Buka dasbor slack api dan klik Buat aplikasi.

Di layar berikutnya, pilih dari manifes aplikasi.

Di layar berikutnya, pilih ruang kerja Slack Anda dan klik Berikutnya.

Di layar ini Anda dapat memberi nama pada aplikasi Anda. Dalam contoh saya, saya telah memasukkan milik saya Laporan analisis mingguan. Klik Berikutnya Ketika Anda siap.

Pada langkah ke 3, Anda tinggal klik menyelesaikan.

Setelah membuat aplikasi, kini Anda dapat menyiapkan webhook.

Buat webhook Slack

Navigasi ke Webhook masuk Dari bilah navigasi kiri dan alihkan tombol ke ada Aktifkan webhook yang masuk. Lalu, di bagian bawah layar, klik Tambahkan e-book baru ke ruang kerja.

Di layar berikutnya, pilih ruang kerja Slack Anda dan saluran yang juga ingin Anda gunakan untuk mengirim pesan, lalu klik mengizinkan.

Anda sekarang akan melihat webhook Slack baru Anda dengan tombol salin. menyalin URL kait webjika Anda telah mengkloning repositori dan mengikuti langkah-langkah memulai di readme, tambahkan URL kait web tiba SLACK_WEBHOOK_URL variabel Anda .env dokumen.

Konfigurasi aplikasi kendur

Pilih dari navigasi kiri Informasi dasar. Di layar ini Anda dapat menyesuaikan aplikasi dan menambahkan ikon dan deskripsi. Pastikan untuk mengklik Simpan perubahan Ketika Anda selesai.

Jika Anda membuka Slack sekarang, Anda akan melihat aplikasi Anda ditambahkan ke ruang kerja Anda.

Ini melengkapi bagian Slack dari artikel ini. Sekarang saatnya menambahkan variabel lingkungan ke Rahasia GitHub dan menjalankan alur kerjanya.

Tambahkan rahasia GitHub

Pergi ke mendirikan Tab repositori GitHub dan pilih dari navigasi kiri rahasia dan variabellalu klik tindakan.

Tambahkan tiga variabel Anda .env di bawah file Rahasia repositori.

Catatan tentang string Base64: Anda tidak perlu menyertakan tanda kutip ganda!

Jalankan alur kerja

Untuk menguji apakah operasi Anda berfungsi dengan benar, kunjungi tindakan Di tab repositori GitHub, pilih nama pekerjaan (Laporan analisis mingguan) dan klik Jalankan alur kerja.

Jika semuanya berjalan dengan baik, Anda sekarang akan melihat daftar sepuluh tampilan halaman teratas di situs Anda di Slack yang diformat dengan baik.

selesai

Itu saja! Laporan Google Analytics yang sepenuhnya otomatis dipublikasikan langsung ke Slack Anda. Saya telah bekerja di beberapa tempat di mana data Google Analytics dikunci, dan menurut saya metode berbagi data Analytics dengan Slack (sesuatu yang dapat diakses oleh semua orang) bisa sangat berharga bagi berbagai orang di organisasi.

Hasilkan $200 seminggu
Dikutip dari artikel di Smashing Magazine — Untuk Desainer dan Pengembang Web