Matomo ile Kullanıcı Takibi

Standard

Merhabalar;

Günümüzde bir website’si üzerinde geliştirme yaparken, artık sadece ürünü geliştirip hızlıca teslim etmek yerine, önceliklerimizden birisi de kullanıcı memnuniyetini maksimumda tutarak, kullanıcı sorunlarını da mümkün olduğunca gidererek, konforlu bir şekilde ürünü kullanmalarına devam etmelerini sağlamaktır.

Bu amaçla kullanıcılardan bizlere geri bildirim yapmalarını rica eder, bu şekilde ürünlerimizi geliştiririz. Peki sadece bu geri bildirimlere dayanarak geliştirme yapmak yeterli midir?

Tabii ki çok daha fazlasını yapabilecekken, değildir 🙂

Artık gelişen arayüz teknolojileri sayesinde, kullanıcıların site üzerinde yaptıkları her işlemi görebilir, bu işlemler üzerinden analizler yaparak, daha verimli siteler inşa edebiliriz.

Peki kullanıcıların yaptıkları hareketleri bildiğimiz takdirde neler yapabiliriz?

Kullanıcıların site üzerindeki hangi kısımları daha yoğun kullandığını tespit ederek, bu kısımlarda işlem yükünü azaltmak için önlemler alarak performansı artırabiliriz.

Yine kullanıcıların hangi daha çok hangi ülkeden, ülkelerin hangi eyaletlerinden/şehirlerinden sitemize giriş yaptıklarını da tespit ederek, bu ülkelere yakın CDN mekanizmaları kurarak ping süresini düşürebilir, daha akıcı bir website deneyimini kendilerine sunabiliriz.

Bu ve bunun gibi birçok iyileştirme içinse arayüz üzerinden kullanıcıları takip edebileceğimiz araçlara ihtiyaç duyarız. Bu yazımda Matomo adında açık kaynak kodlu bir yazılım ile, Django ile nasıl kullanıcı takip edebileceğimize dair bilgi vereceğim.

Başlamadan önce Matomo’nun resmi website’sinden ne olduğuna dair kısa bir alıntı yaparak, kendisini tanıtmış olayım;

Matomo is an all-in-one premium web analytics platform designed to give you the most conclusive insights with our complete range of features.
You can also evaluate the full user-experience of your visitor’s behaviour with Matomo’s Conversion Optimization features, including Heatmaps, Sessions Recordings, Funnels, Goals, Form Analytics and A/B Testing.
And this is only the beginning – you can enhance your SEO, access full Visitor Profiles, use our data sensitive Tag Manager and so much more …

https://matomo.org/why-matomo/

Gelelim kurulum işlemine. Matomo’yu isterseniz sitesi üzerinden 30 günlüğüne deneyerek, direkt siteniz üzerinde çalıştırabilir ya da kendi sunucunuz üzerinde kurulumunu yaparakta kullanabilirsiniz.

Hadi başlayalım !

Matomo’nun github adresine girerek eğer lokal ortamda kullanacaksanız, açıklama kısmında yazılan adımları takip ederek kurulum yapabilirsiniz;

https://github.com/matomo-org/matomo

Ben bu yazımda hızlıca kullanabilmek için docker-compose yardımıyla kendisini kullanmaya başlayacağım.

version: '3'
services:
  mariadb:
    image: 'bitnami/mariadb:10.3'
    environment:
      - MARIADB_USER=bn_matomo
      - MARIADB_DATABASE=bitnami_matomo
      - ALLOW_EMPTY_PASSWORD=yes
    volumes:
      - 'mariadb_data:/bitnami'
  matomo:
    image: 'bitnami/matomo:3'
    environment:
      - MARIADB_HOST=mariadb
      - MARIADB_PORT_NUMBER=3306
      - MATOMO_DATABASE_USER=bn_matomo
      - MATOMO_DATABASE_NAME=bitnami_matomo
      - ALLOW_EMPTY_PASSWORD=yes
    ports:
      - '8080:80'
    depends_on:
      - mariadb
    volumes:
      - 'matomo_data:/bitnami'
volumes:
  mariadb_data: {}
  matomo_data: {}

bu kodu “docker-compose.yml” dosyasına kaydettikten sonra, bulunduğu dizinde;

docker-compose up --build -d

Komutundan sonra şu çıktıyı görene kadar bekleyin;

Arayüze giriş yapabilmek için http://localhost:8080 adresinden giriş yaparak varsayılan kullanıcı adı “User”, parolası “bitnami” kullanınız.

Giriş yaptığınızda size örnek olarak bir kod parçacığı vererek, template altında kullandığınız saydanın <header> div’i içerisine bu kodu ekleyerek sitenin takip edilmesi işlemini başlatabilirsiniz.

Örnek Javascript kodu;

 <!-- Matomo -->
<script type="text/javascript">
    var _paq = window._paq || [];
    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function () {
        var u = "//localhost:8080/";
        _paq.push(['setTrackerUrl', u + 'matomo.php']);
        _paq.push(['setSiteId', '1']);
        var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
        g.type = 'text/javascript';
        g.async = true;
        g.defer = true;
        g.src = u + 'matomo.js';
        s.parentNode.insertBefore(g, s);
    })();
</script>
<!-- End Matomo Code -->

Kodu sitenizin header kısmına ekledikten sonra, kullanıcı girişlerini takip etmek içinse;

 _paq.push(['setUserId', 'USER_ID_HERE']); _
paq.push(['trackPageView']); 

Kodunu javascript kısmını ekleyerek kullanabilirsiniz. Dikkat etmeniz gereken nokta kullanıcı ID’sini eklediğiniz kısmın “trackPageView” kısmından öncesinde gelmesi gerekliliği. Ayrıca her istekte kullanıcı bilgisini tekrar göndermeniz gerekmekte. Göndermediğinizse Matomo kullanıcı için otomatik bir benzersiz ID oluşturup kendisini ziyaretçi olarak tanımlayarak sistemden takip ettirmeye devam edecektir.

Kullanıcının çıkış yaptığı kısımdaysa;

 // User has just logged out, we reset the User ID which also generates a new Visitor ID 
_paq.push(['resetUserId']); 
_paq.push(['trackPageView']); 

Matomo’nun kurulumu ve temel kullanımından sonra, gelelim Django projemize uygulanmasına;

 django-admin startproject matomoUsingWithDjango
 python manage.py startapp sampleMatomo

Projemizi ve örnek uygulamamızı oluşturduk. Basit bir kullanıcı mekanizması oluşturalım. Django’da contribution paketi altında, kullanıcı mekanizması hazır olarak bize gelmekte. Bunu kullanmak için, urls.py dosyasını aşağıdaki şekilde düzenleyelim;

 # Created by SezerBozkir<admin@sezerbozkir.com> at 8/6/2019
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('django.contrib.auth.urls'))
]

Bu yapının nasıl kullanıldığı, başka bir makalenin konusu 🙂 yine de yazmamı bekleyemeyecek kadar sabırsız olanlar için: (tık)

Şimdi de template dizinimiz altında oluşturduğumuz “registration” dizininin altına “login.html” oluşturup içerisine aşağıdaki kod bloğunu ekleyelim;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Matomo ile Kullanıcı Takibi - Sezer BOZKIR </title>
</head>
<body>
<h2>Login</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Login</button>
</form>
</body>
</html>

Kullanıcı eklemek için konsoldan ;

python manage.py createsuperuser

diyerek kullanıcımızı oluşturduktan sonra, anasayfa için de yine templates dizini altında “index.html” dosyasını oluşturup içerisine aşağıdaki kod bloğunu ekleyelim;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Matomo ile Kullanıcı Takibi - Sezer BOZKIR </title>
    <!-- Matomo -->
    <script type="text/javascript">
        var _paq = window._paq || [];
        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
        {% if user.is_authenticated %}
            _paq.push(['setUserId', '{{ user.username }}']);
        {% endif %}
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function () {
            var u = "//localhost:8080/";
            _paq.push(['setTrackerUrl', u + 'matomo.php']);
            _paq.push(['setSiteId', '1']);
            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
            g.type = 'text/javascript';
            g.async = true;
            g.defer = true;
            g.src = u + 'matomo.js';
            s.parentNode.insertBefore(g, s);
        })();
    </script>
    <!-- End Matomo Code -->

</head>
<body>
<h2>Login</h2>
{% if user.is_authenticated %}
    Hi {{ user.username }}!
    <p><a href="{% url 'logout' %}">logout</a></p>
{% else %}
    <p>You are not logged in</p>
    <a href="{% url 'login' %}">login</a>
{% endif %}
</body>
</html>

Herşey hazır olduğuna göre test ettiğimizde Matomo tarafında direkt kullanıcı hareketlerini görebilirsiniz;

Uygulamanın kodlarına buradan ulaşabilirsiniz;

https://github.com/Natgho/matomowithdjango

Matomo’yu sitenize uygulama hakkında Daha fazlası için (TIK)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir