Porady & Profesjonalne strony internetowe / usługi www

Jak podłączyć Google Analytics pod instalację WordPressa?

Sposobów na integrację Analyticsa z WordPressem jest kilka - wtyczki, stworzenie motywu potomnego i dołączenie "na żywca" kodu w nagłówku(lub stopce), dodanie funkcji i zapewne jeszcze kilka innych sposobów, które są lepiej lub gorzej opisane w sieci.

Jeśli mamy tyle opcji, to dlaczego by nie stworzyć wtyczki specjalnie dla siebie? Specjalnie utworzona mała wtyczka dostosowana do naszych potrzeb, bez dodatkowego, niepotrzebnego kodu.

Wbrew pozorom stworzenie takiej prostej wtyczki nie wymaga żadnej specjalistycznej wiedzy - przekonajcie się czytając artykuł poniżej.


Co będzie nam potrzebne?
- Edytor tekstowy, np. Notepad++(mogą być też inne - Atom, Sublime lub cokolwiek innego, zwykłego notatnika lepiej unikać).
- Aplikacja do kompresji plików(7zip lub Winrar w zupełności wystarczą) lub połączenie FTP/SFTP(zalecam łączyć się poprzez SFTP - artykuł na wikipedii powie wam dlaczego) z serwerem, jeśli mamy wyłączone zarządzanie wtyczkami.

Tyle wystarczy. Więc zaczynamy.

Tworzenie wtyczki Google Analytics

1. Tworzymy nowy plik, np. o nazwie analytics.php(nazwa nie ma większego znaczenia, byle bez liter zawierających znaki diakrytyczne).
2. Otwieramy utworzony plik w edytorze tekstowym.
3. Następnie wklejamy do niego poniższy kod:

<?php
/*
Plugin Name: Kod Analytics
Plugin URI: http://mojastrona.pl
Description: Dodaje kod google analytics do nagłówka podpinając się pod wp_head
Author: ---
Version: 1.0
 */

 function w3wg_google_analytics() { ?>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-XX', 'auto');
  ga('send', 'pageview');

</script>

<?php }
add_action( 'wp_head', 'w3wg_google_analytics', 10 );

Więc zapewne niektórzy chcieliby wiedzieć co i dlaczego wklejają do pliku, więc tłumaczę.

function w3wg_google_analytics() - to otwarcie funkcji i nazwa fukcji, dobrze jest odpowiednio nazwać funkcję dla prawidłowej identyfikacji.

Tagi <script></script> - to po prostu otwarcie skryptu. To, co znajduje się pomiędzy nimi, to przekopiowany kod śledzący z Google Analytics.

add_action - dodaje akcję, akcje to dosłownie mówiąc "podpięcia", które uruchamiają się w określonym punkcie. Więcej na ten temat przeczytacie na oficjalnej stronie WordPressa. Dodanie akcji jest wymagane, aby WordPress wiedział, kiedy dana funkcja ma zostać uruchomiona.

wp_head - podpina się pod nagłówek witryny przed zamknięciem </head>.

Liczba 10 - priorytet danej akcji. Priorytety nadają "hierarchię", którą można później wykorzystać w przypadku innych funkcji, przykładowo jeśli chcielibyśmy usunąć akcję naszego analyticsa(metoda jest o wiele "czystsza", niż usuwanie kodu, czy nadpisywania) wystarczyłoby dodać do functions.php kod:

add_action( 'wp_head', 'remove_my_action' );
function remove_my_action(){
	remove_action( 'wp_footer', 'w3wg_google_analytics', 11 );
}

- jak widzicie tutaj usuwanie funkcji ma numer większy, niż pierwotna funkcja, co po prostu oznacza, że będzie miała większy priorytet i tym samym funkcja nie będzie uruchomiona.

4. Podmieniamy własny kod śledzący analyticsa(po zalogowaniu do Analyticsa znajdziemy go klikając na "Administracja" w lewym panelu zarządzania, następnie ze środkowej kolumny(USŁUGA (NP. WITRYNA LUB APLIKACJA)) wybieramy usługę, klikamy na "Informacje o śledzeniu" i wybieramy na "Kod śledzenia". Myślę, że jest oczywiste co dokładnie musimy podmienić.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');

</script>

Kod właściwie różni się tylko indentyfikatorem, czyli: UA-XXXXXXXX-X - ten dla każdej usługi będzie unikalny(zamiast X będą oczywiście numery).

5. Zapisujemy wprowadzone zmiany. Następnie tworzymy nowy folder, przykładowo o nazwie "analytics".
6. Do wspomnianego folderu wrzucamy nasz plik.
7. Folder pakujemy za pomocą zipa bez kompresji(programem winrar, 7zip lub czymkolwiek innym, co obsługuje kompresję zip).
8. Tak powstałą paczkę (czyli analytics.zip) instalujemy jak normalną wtyczkę.

* Alternatywnie możemy po prostu wrzucić folder(FTP/SFTP) nie pakując go w ogóle do /wp-content/plugins/, a następnie w panelu administracyjnym wtyczkę aktywować.

W ten sposób mamy gotową wtyczkę z minimum niezbędnego kodu - nie ma potrzeby jej aktualizacji i jesteśmy pewni co się w niej znajduje.

Powyższa wtyczka w domyślnej formie ma jeden problem - raportuje ona również nasze wejścia nasze(administratorów) i jednakowo zalogowanych i niezalogowanych. Prowadzi to zwyczajnie do niekoniecznie pożądanych wyników w raportach.

Więc co zrobić, żeby wtyczka "działała" tylko i wyłącznie dla niezalogowanych?

Należy zmodyfikować oryginalny kod:

<?php
/*
Plugin Name: Kod Analytics
Plugin URI: http://mojastrona.pl
Description: Dodaje kod google analytics do nagłówka podpinając się pod wp_head
Author: ---
Version: 1.0
 */

function w3wg_google_analytics() {

   $analytics_code = "<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');

</script>";

   if (!is_user_logged_in()) {
      echo $analytics_code;
   }

}
add_action( 'wp_head', 'w3wg_google_analytics', 10 );

Jak widać dodaliśmy tutaj zmienną, która jest skryptem GA oraz warunek if z funkcją is_user_logged_in.

Wykrzyknik przed funkcją też jest tam nie bez powodu - is_user_logged_in zwraca domyślnie wartość funkcji jako rzeczywistą (tj. "true" - używając tej funkcji interpreter zakłada, że użytkownik jest faktycznie zalogowany), wykrzyknik "odwraca" wartość na nieprawdziwą(w tym konkretnym przypadku - true na false), czyli skrypt GA będzie "uruchamiany" w przypadku, kiedy użytkownik jest niezalogowany - w efekcie Google Analytics będzie raportował tylko i wyłącznie wejścia niezalogowanych(tj. gości).

No dobrze ale co w przypadku, kiedy mój serwis jest oparty właśnie na społeczności użytkowników i chcę monitorować również ich ruch wykluczając mój własny(administratora)?

Nic prostszego - zmieniamy warunek if (!is_user_logged_in()) { na if (!current_user_can('manage_options')) {, zawartość wtyczki będzie wyglądała w ten sposób:

<?php
/*
Plugin Name: Kod Analytics
Plugin URI: http://mojastrona.pl
Description: Dodaje kod google analytics do nagłówka podpinając się pod wp_head
Author: ---
Version: 1.0
 */

function w3wg_google_analytics() {

   $analytics_code = "<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');

</script>";

   if (!current_user_can('manage_options')) {
      echo $analytics_code;
   }

}
add_action( 'wp_head', 'w3wg_google_analytics', 10 );

current_user_can() - sprawdza, czy użytkownik posiada dane uprawnienia, w naszym przypadku 'manage_options', czyli zarządzanie konfiguracją, do których mają dostęp tylko administratorzy.

Wykrzyknik oczywiście odwraca wartość true na false, więc kod Google Analytics zostanie uruchomiony zawsze, kiedy zalogowany użytkownik nie będzie miał dostępów do zarządzania konfiguracją strony(kolokwialnie mówiąc nie-administrator).

Jak widać podpięcie Analyticsa na własny sposób wcale nie musi być trudne 🙂 Nie potrzebujemy do tego ciężkich wtyczek, ani też nie musimy specjalnie bawić się w motywy potomne, aby podpiąć sam kod GA.


Źródła:
How to Add Google Analytics to WordPress With a Simple Plugin
Avoid Logged in User Tracking with Google Analytics in WordPres