Laravel Analytics - Halo sobat Dev ๐ kita jumpa lagi di seri tutorial penggunaan package di laravel. Package yang akan kita coba implementasikan kali ini yaitu Laravel Analytics dari Spatie yang berfungsi untuk membantu atau memudahkan kita dalam mendapatkan data dari google analytics dan menampilkannya pada laravel project. Pada seri artikel ini akan coba saya jelaskan step by step mulai dari membuat project di Google Cloud Platform, mengaktifkan library " Google Analytics Data API" pada project, menambahkan user pada property google analytics sampai implementasi laravel analytics package di Laravel. ๐
Table of Contents
Google Analytics
Google Analytics merupakan sebuah layanan gratis dari Google yang berfungsi untuk menampilkan statistik pengunjung pada sebuah website. Google Analytics biasa digunakan oleh pada pemilik website untuk menganalisa kinerja website berdasarkan data-data statistik yang ditampilkannya.
Google Cloud Platform
Hal pertama yang perlu kita lakukan adalah mendapatkan beberapa credential untuk menggunakan Google API. Disini saya asumsikan temen-temen sudah mempunyai akun google dan sudah masuk dengan akun google tersebut. Silakan buka situs Google API, pilih project jika kalian sudah punya project atau buat project baru jika kalian belum pernah membuat project di situs Google API. (https://console.developers.google.com/apis)
Klik New Project untuk membuat project baru.
Isi field project name , kemudian klik Create.
Selanjutnya, kita perlu menentukan API mana saja yang akan digunakan di project kita dengan masuk ke menu Library.
Cari " Google Analytics Data API", klik library seperti gambar di bawah ini.
Kemudian, klik Enable untuk mengaktifkan library Google Analytics Data API pada project kita.
Setelah kita membuat project yang memiliki akses ke API Google Analytics, sekarang saatnya mengunduh file dengan credential yang dibutuhkan. Klik menu Credentials yang ada di sidebar kemudian klik + Create Credentials dan pilih Service account.
Selanjutnya, kita perlu mengisikan field service account name seperti pada form di bawah ini. Kalian dapat menamai service account name , apapun yang kalian suka. Coba perhatikan service account id , di situ terdapat alamat email dan email tersebut akan kita gunakan dalam proses integrasi data google analytics di laravel.
Oke. Setelah service account berhasil dibuat, silakan klik detail dari service account tersebut. Klik tab " Keys", lalu klik dropdown button Add Key dan pilih Create new key.
Pilih key type " JSON" dan klik create untuk download file JSON.
Simpan file JSON yang baru saja didownload tersebut di dalam laravel project temen-temen di lokasi yang telah ditentukan dalam key service_account_credentials_json dari file config laravel analytics package ( config/analytics.php ).
Mendapatkan Property ID
Oke, selanjutnya saya juga berasumsi bahwa kalian telah membuat akun google analytics dan menggunakan property GA4 atau yang terbaru. Pertama, kita perlu mengetahui property_id dari property analytics yang digunakan. Cara mengetahuinya sangat mudah yaitu dengan masuk ke halaman Settings > Property Settings. Di halaman ini, kalian dapat menyalin value PROPERTY ID dari property analytics temen-temen. Nanti, kita akan menggunakan value PROPERTY ID ini untuk key ANALYTICS_PROPERTY_ID di file .env.
Tambah User Google Analytics
Selanjutnya, kita perlu memberikan akses ke service account yang telah kita buat di step sebelumnya. Klik menu Admin yang ada di sidebar (pojok kiri bawah), lalu buka menu "Property Access Management".
Klik icon atau tanda tambah di pojok kanan atas dan klik Add users untuk menambahkan user baru.
Di step ini, kalian dapat memberikan akses ke alamat email yang bisa ditemukan pada key client_email dari file json yang telah kita unduh di langkah sebelumnya. Pilih role Analyst dan klik Add.
Integrasi Google Analytics di Laravel
Setelah selesai dengan setup Google API, sekarang saya akan langsung mengajak temen-temen ke koding. Di tahap ini akan saya jelaskan step by step bagaimana cara mendapatkan data dari google analytics dan menampilkannya pada laravel project dengan menggunakan laravel analytics package. ๐
Install Laravel
Langkah awal yang saya jelaskan disini, dimulai dari install fresh laravel project menggunakan laravel installer dengan perintah seperti di bawah ini.
laravel new laravel-analytics
Install Laravel Analytics Package
Sudah berhasil install laravel? kita lanjutkan dengan menginstall package yang akan kita gunakan dalam project ini yaitu laravel analytics dari Spatie. Silakan jalankan perintah seperti di bawah ini untuk menginstall laravel analytics package di laravel project kita.
composer require spatie/laravel-analytics
Kemudian kita publish analytics config file pada laravel analytics package dengan perintah di bawah ini.
php artisan vendor:publish --tag="analytics-config"
Buka file config/analytics.php. Coba perhatikan pada key di bawah ini. Key service_account_credentials_json ini merupakah path dari file json yang telah kita unduh pada step sebelumnya. Jadi, file json yang telah diunduh tadi bisa kita rename menjadi service-account-credentials.json dan letakkan pada direktori storage/app/analytics.
'service_account_credentials_json' => storage_path('app/analytics/service-account-credentials.json'),
Selanjutnya, tambahkan key ANALYTICS_PROPERTY_ID pada file .env. Copy PROPERTY ID yang terdapat pada akun google analytics (Settings > Property Settings) dan paste pada key di file .env tersebut.
ANALYTICS_PROPERTY_ID=xxxxxxxxx
Buat DashboardController
Disini saya akan memberikan contoh penggunaan laravel analytics package ini pada controller. Untuk itu, kita perlu membuat controller baru (Single Action Controllers) dengan menjalankan perintah seperti di bawah ini.
php artisan make:controller DashboardController -i
Buka file DashboardController, lalu sesuaikan kode yang ada atau ubah menjadi seperti di bawah ini. Disini kita akan menggunakan method-method yang memang telah disediakan oleh laravel analytics package ini, seperti; Visitors and page views, Total visitors and pageviews, Most visited pages, Top referrers, User Types dan Top browsers.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Spatie\Analytics\Period;
use Analytics;
class DashboardController extends Controller
{
public function __invoke(Request $request)
{
$visitorsAndPageViews = Analytics::fetchVisitorsAndPageViews(Period::days(7));
$totalVisitorsAndPageViews = Analytics::fetchTotalVisitorsAndPageViews(Period::days(7));
$mostVisitedPages = Analytics::fetchMostVisitedPages(Period::days(7));
$topReferrers = Analytics::fetchTopReferrers(Period::days(7));
$userTypes = Analytics::fetchUserTypes(Period::days(7));
$topBrowsers = Analytics::fetchTopBrowsers(Period::days(7));
return view('welcome', compact('visitorsAndPageViews', 'totalVisitorsAndPageViews', 'mostVisitedPages', 'topReferrers', 'userTypes', 'topBrowsers'));
}
}
Setup Route
Oke, next kita pindah ke routes/web.php. Ganti default route seperti di bawah ini.
Route::get('/', function () {
return view('welcome');
});
Ganti default route dari laravel dengan route baru yang mengarah ke DashboardController seperti di bawah ini.
Route::get('/', App\Http\Controllers\DashboardController::class);
Buat View
Langkah terakhir yaitu setup view. Buka file welcome.blade.php, kemudian ubah menjadi seperti di bawah ini. Disini kita menggunakan class table dari bootstrap untuk menampilkan data-data yang telah diambil dari Google Analytics menggunakan laravel analytics package.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
How to Integrate Google Analytics in Laravel
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container py-5">
<div class="row">
<h2 class="fs-4 fw-bold text-center mb-5">
How to Integrate Google Analytics in Laravel
</h2>
<div class="col-md-12">
<div class="card mb-3">
<div class="card-header">
<h2 class="fs-5 fw-bold">
Visitors and Page Views
</h2>
</div>
<div class="card-body">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 5%">No.</th>
<th style="width: 65%">Page</th>
<th style="width: 15%">Active Users</th>
<th style="width: 15%">Page views</th>
</tr>
</thead>
<tbody>
@foreach($visitorsAndPageViews as $key => $data)
<tr>
<td>{{ ++$key }}</td>
<td>{{ $data['pageTitle'] }}</td>
<td>{{ $data['activeUsers'] }}</td>
<td>{{ $data['screenPageViews'] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">
<h2 class="fs-5 fw-bold">
Total Visitors and Pageviews
</h2>
</div>
<div class="card-body">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 5%">No.</th>
<th style="width: 65%">Date</th>
<th style="width: 15%">Active Users</th>
<th style="width: 15%">Page views</th>
</tr>
</thead>
<tbody>
@foreach($totalVisitorsAndPageViews as $key => $data)
<tr>
<td>{{ ++$key }}</td>
<td>{{ $data['date'] }}</td>
<td>{{ $data['activeUsers'] }}</td>
<td>{{ $data['screenPageViews'] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">
<h2 class="fs-5 fw-bold">
Most Visited Pages
</h2>
</div>
<div class="card-body">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 5%">No.</th>
<th style="width: 45%">Page</th>
<th style="width: 35%">URL</th>
<th style="width: 15%">Page views</th>
</tr>
</thead>
<tbody>
@foreach($mostVisitedPages as $key => $data)
<tr>
<td>{{ ++$key }}</td>
<td>{{ $data['pageTitle'] }}</td>
<td>{{ $data['fullPageUrl'] }}</td>
<td>{{ $data['screenPageViews'] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">
<h2 class="fs-5 fw-bold">
Top Referrers
</h2>
</div>
<div class="card-body">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 5%">No.</th>
<th style="width: 65%">Page Referrer</th>
<th style="width: 30%">Page views</th>
</tr>
</thead>
<tbody>
@foreach($topReferrers as $key => $data)
<tr>
<td>{{ ++$key }}</td>
<td>{{ $data['pageReferrer'] }}</td>
<td>{{ $data['screenPageViews'] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">
<h2 class="fs-5 fw-bold">
User Types
</h2>
</div>
<div class="card-body">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 5%">No.</th>
<th style="width: 65%">Type</th>
<th style="width: 30%">Active Users</th>
</tr>
</thead>
<tbody>
@foreach($userTypes as $key => $data)
<tr>
<td>{{ ++$key }}</td>
<td>{{ $data['newVsReturning'] }}</td>
<td>{{ $data['activeUsers'] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-header">
<h2 class="fs-5 fw-bold">
Top Browsers
</h2>
</div>
<div class="card-body">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 5%">No.</th>
<th style="width: 65%">Browser</th>
<th style="width: 30%">Page Views</th>
</tr>
</thead>
<tbody>
@foreach($topBrowsers as $key => $data)
<tr>
<td>{{ ++$key }}</td>
<td>{{ $data['browser'] }}</td>
<td>{{ $data['screenPageViews'] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kesimpulan
Setelah semua langkah-langkah di atas sudah dikerjakan, maka sekarang waktunya untuk testing, apakah data-data dari google analytics sudah bisa ditampilkan di laravel app atau belum. Silakan jalankan laravel project kalian, kemudian buka pada browser.
Jika berhasil, maka tampilannya kurang lebih akan seperti gambar di atas. Gambar di atas merupakan contoh hasil dari method perbandingan total visitors dan page views. Jika kalian baru saja membuat akun google analytics, mungkin data-datanya tidak akan langsung keluar. Kalian perlu menunggunya sekitar 24 jam atau lebih.
Demikianlah artikel tentang laravel analytics package. Dari sini dapat kita simpulkan bahwa dengan adanya laravel analytics package ini dapat memudahkan kita dalam mengintegrasikan google analytics di laravel project kita, sehingga kita tidak perlu lagi membuat situs google analytics untuk mengetahui data kunjungan pada website kita. Kita bisa menganalisa website kita hanya dari dashboard website atau sistem kita sendiri.
Semoga artikel ini bisa bermanfaat dan bisa membantu teman-teman dalam mengintegrasikan google analytics di laravel project kalian. Sampai jumpa di artikel berikutnya dan Happy Coding ๐
Full Documentation: Laravel Analytics
Credit: Data illustrations by Storyset
Top comments (0)