Obecnie 205 forumowiczów jest online
Obecnie 205 forumowiczów jest online
Porozmawiaj na temat implementacji kodu śledzenia w wielu domenach, ustaw śledzenie zdarzeń. Dowiedz się, czym jest Universal Analytics i jak korzystać z Menedżera tagów Google.
Poprowadź mnie
star_border
Odpowiedz

Skrypt pogodowy do Universal Analytics

[ Edytowane ]
Student ✭

Witam,

Próbuję wczytać przez GTM skrypt zbierający dane pogodowe. Postępuję zgodnie z instrukcją: http://www.simoahava.com/analytics/send-weather-data-to-google-analytics-in-gtm-v2/

Utworzyłem regułę:

 

Event - weatherDone.jpg

Następnie 3 zmienne:

DLV temperature.jpgDLV weather.jpgsession alive.jpg

Dodałem wymiary niestandardowe w GA:

wymiary w GA.jpg

I tag Universal Analytics:

tag gtm.jpg

Dochodzimy do tagu HTML:

 

<script src="http://www.geoplugin.net/javascript.gp"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  (function() {
    if (typeof {{Session alive}} === 'undefined') {
      try {
        // Get latitude and longitude of the visitor
        var latitude = geoplugin_latitude();
        var longitude = geoplugin_longitude();
 
        // Set up variables for the API call
        var weather = 'Undefined';
        var temperature = 'N/A';
        var endpoint = 'http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + "&lon=" + longitude;
 
        // Build a simple temperature parser
        var parseTemp = function(temp) {            
          var roundTemp;
          roundTemp = 5 * Math.round(temp/5);
          if (temp < 0) {
            return roundTemp + '°C - ' + (roundTemp - 5) + '°C';
          } else if (temp > 0) {
            return roundTemp + '°C - ' + (roundTemp + 5) + '°C';
          } else if (temp === 0) {
            return '0°C';
          }
          return 'N/A';
        };
 
        // Make the API call
        jQuery.ajax({
          type : 'POST',
          dataType : 'jsonp',
          url : endpoint + '&units=metric&callback=?',
          async : true,
          success : function(data) {
            weather = data['weather'][0]['main'];
            temperature = parseTemp(data['main']['temp']);
          },
          error : function(xhr, textStatus, errorThrown) {
            console.log('Error while fetching weather data &colon;: ' + errorThrown);
          },
          complete : function() {
            dataLayer.push({
              'event' : 'weatherDone',
              'weather' : weather,
              'temperature' : temperature
            });
          }
        });
      } catch(e) {
        dataLayer.push({
          'event' : 'APIError',
          'APIErrorMSG' : e.message
        });
      }
    }    
    
    // Reset "session" cookie with a 30-minute expiration
    var d = new Date();
    d.setTime(d.getTime()+1800000);
    var expires = "expires="+d.toGMTString();
    document.cookie = "session=1; "+expires+"; path=/";
  })();
</script>

W podanym linku znajdujemy taką uwagę:

 

It’s important to notice that I’m loading two libraries in the very top of the script: jQuery and the geolocation API from geoPlugin. Also, I’ve wrapped the whole script itself in an immediately invoked function expression to scope all variables to the function and thus avoid polluting the global namespace.

If you’re already loading jQuery on the site, you shouldn’t load it again in this Tag, but then you will need to ensure the Custom HTML Tag fires only after jQuery has completely loaded. If you load jQuery asynchronously, it leaves you little choice but to fire the Custom HTML Tag upon the Window Loaded Trigger, since that’s the only moment you can be sure that jQuery has beed loaded.

To rozumiem, że jeśli mam już wczytane jquery na stronie to mogę wykreślić z kodu:

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

i nie za bardzo rozumiem co dalej zrobić z tym tagiem odpalanym po załadowaniu jquery? 

 

 

Doczytałem się, że muszę założyć konto na http://openweathermap.org/ i podmienić w kodzie linijkę:

 

var endpoint = 'http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + "&lon=" + longitude;
na

var endpoint = ‘http://api.openweathermap.org/data/2.5/weather?appid=MÓJ API &lat=’ + latitude + “&lon=” + longitude;

i dochodzimy do ostatniego punktu z linku:

 

 

The final bit of the puzzle is to fire the tag just once per session. We do this by only firing the script if a custom 1st party cookie has not been set. The {{Session alive}} Variable returns undefined if the cookie is not set, so we can check against this before proceeding with the API call.
if (typeof {{Session alive}} === 'undefined') {
    ...the API call...                   <---- CZY MAM TO DODAĆ DO KODU HTML?
  }    
    
  // Reset "session" cookie with a 30-minute expiration
  var d = new Date();
  d.setTime(d.getTime()+1800000);
  var expires = "expires="+d.toGMTString();
  document.cookie = "session=1; "+expires+"; path=/";

Nie do końca rozumiem co muszę tu zrobić.

Czy oprócz tych punktów muszę zwrócić jeszcze na coś uwagę, żeby wszystko zadziałalo i nic nie popsuć? Pozdrawiam

 

 

 

 

Odpowiedź eksperta 2verified_user

Zaakceptowane rozwiązania
Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: Robert K
marca 2016

Dot.: Skrypt pogodowy do Universal Analytics

Wschodząca Gwiazda
To trochę mały fragment, by stwierdzić jednoznacznie, ale jeśli w dalszej części tego kodu nie występuje coś w stylu async=true lub nie występuje atrybut async to można przyjąć, że kod nie jest ładowany asynchronicznie i możesz użyć typu "Element DOM dostępny".
Jeśli jednak przy testowaniu zauważysz, że raz Ci działa, a raz nie (w sensie będą jakieś błędy dotyczące jQuery) no to wówczas zmień regułę na "Wczytanie okna".
Tomasz Ciepłucha

Wyświetl rozwiązanie w oryginalnym poście


Wszystkie odpowiedzi

Dot.: Skrypt pogodowy do Universal Analytics

Wschodząca Gwiazda
W punkcie 3.3 jest po prostu wyjaśnienie fragmentu kodu, który jest w całości podany wcześniej.
Warunek:
if (typeof {{Session alive}} === 'undefined') {

}
sprawdza, czy zmienna "Session alive" jest ustawiona po to by nie robić wywołania do API za każdym przeładowaniem strony, tylko raz na sesję.
Jeśli ma wartość undefined wóczas wykonywany jest cały blok wewnątrz warunku "...the API call... ".
Stąd też dla wymiarów definiowałeś zasięg na sesję, a nie na hita.

Myślę, że jeśli zrobiłeś wszystko według instrukcji w artykule to nic więcej nie musisz robić oprócz przetestowania i napisania czy działa Emotikon: Szczęśliwy
Tomasz Ciepłucha

Dot.: Skrypt pogodowy do Universal Analytics

Student ✭

Podczas testowania wystąpił taki błąd:

błąd 1.jpg

 

a to kod:

<script src="http://www.geoplugin.net/javascript.gp"></script>
<script>
  (function() {
    if (typeof {{Session alive}} === 'undefined') {
      try {
        // Get latitude and longitude of the visitor
        var latitude = geoplugin_latitude();
        var longitude = geoplugin_longitude();
 
        // Set up variables for the API call
        var weather = 'Undefined';
        var temperature = 'N/A';
        var endpoint = ‘http://api.openweathermap.org/data/2.5/weather?appid=b3c0f6442e21f6486da98d7d8a0e28ab&lat=’ + latitude + “&lon=” + longitude;
 
        // Build a simple temperature parser
        var parseTemp = function(temp) {            
          var roundTemp;
          roundTemp = 5 * Math.round(temp/5);
          if (temp < 0) {
            return roundTemp + '°C - ' + (roundTemp - 5) + '°C';
          } else if (temp > 0) {
            return roundTemp + '°C - ' + (roundTemp + 5) + '°C';
          } else if (temp === 0) {
            return '0°C';
          }
          return 'N/A';
        };
 
        // Make the API call
        jQuery.ajax({
          type : 'POST',
          dataType : 'jsonp',
          url : endpoint + '&units=metric&callback=?',
          async : true,
          success : function(data) {
            weather = data['weather'][0]['main'];
            temperature = parseTemp(data['main']['temp']);
          },
          error : function(xhr, textStatus, errorThrown) {
            console.log('Error while fetching weather data :: ' + errorThrown);
          },
          complete : function() {
            dataLayer.push({
              'event' : 'weatherDone',
              'weather' : weather,
              'temperature' : temperature
            });
          }
        });
      } catch(e) {
        dataLayer.push({
          'event' : 'APIError',
          'APIErrorMSG' : e.message
        });
      }
    }    
    
    // Reset "session" cookie with a 30-minute expiration
    var d = new Date();
    d.setTime(d.getTime()+1800000);
    var expires = "expires="+d.toGMTString();
    document.cookie = "session=1; "+expires+"; path=/";
  })();
</script>

Wrócę jeszcze do poprzedniego pytania, jeśli mam już załadowaną bibliotekę jquery i usunąłem linijkę z 2 wiersza:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

To jak ustawić, żeby tag odpalał się po załadowaniu jquery?  W linku było: 

If you’re already loading jQuery on the site, you shouldn’t load it again in this Tag, but then you will need to ensure the Custom HTML Tag fires only after jQuery has completely loaded. If you load jQuery asynchronously, it leaves you little choice but to fire the Custom HTML Tag upon the Window Loaded Trigger, since that’s the only moment you can be sure that jQuery has beed loaded.

Dzięki za pomoc.

 

Dot.: Skrypt pogodowy do Universal Analytics

Wschodząca Gwiazda
Jeśli chodzi o błąd to jest on spowodowany niewłaściwym znakiem apostrofu i cudzysłowów otwierającego i zamykającego w tej linii:
var endpoint = ‘http://api.openweathermap.org/data/2.5/weather?appid=XXXX&lat=’ + latitude + “&lon=” + longitude;

Powinno być:
var endpoint = "http://api.openweathermap.org/data/2.5/weather?appid=XXXX&lat=" + latitude + "&lon=" + longitude;

oczywiście z Twoim kluczem API.

W kwestii unikania podwójnego ładowania jQuery to zależy czy ładujesz jQuery asynchronicznie, czy nie. Jeśli tak to odpowiedź masz w swoim poście, w cytowanym fragmencie - musisz odpalić tag zdarzeniem Window Loaded.
W tym celu stwórz nową regułę "Wyświetlenie strony" i wybierz typ "Wczytanie okna".

Jeśli nie ładujesz jQuery asynchronicznie to powinna wystarczyć ta sama reguła tylko z typem "Element DOM dostępny".
Tomasz Ciepłucha

Dot.: Skrypt pogodowy do Universal Analytics

Student ✭

A jak to sprawdzić? Na stronie mam kod:

<!-- jQuery -->
<script>
!window.jQuery && document.write('<script src=XXX/js/jquery.min.js

Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: Robert K
marca 2016

Dot.: Skrypt pogodowy do Universal Analytics

Wschodząca Gwiazda
To trochę mały fragment, by stwierdzić jednoznacznie, ale jeśli w dalszej części tego kodu nie występuje coś w stylu async=true lub nie występuje atrybut async to można przyjąć, że kod nie jest ładowany asynchronicznie i możesz użyć typu "Element DOM dostępny".
Jeśli jednak przy testowaniu zauważysz, że raz Ci działa, a raz nie (w sensie będą jakieś błędy dotyczące jQuery) no to wówczas zmień regułę na "Wczytanie okna".
Tomasz Ciepłucha

Dot.: Skrypt pogodowy do Universal Analytics

Student ✭

Mam w kodzie fragmenty:
j.async=true
x.async = true
Więc odpalam regułą wczytania okna. Wszystko działa, zaczęły się pojawiać dane:

pogoda.jpg

 

Chciałem tylko podmienić język, żeby zaciągał pogodę w PL. Podmieniłem więc

var endpoint = "http://api.openweathermap.org/data/2.5/weather?appid=XXX&lat=" + latitude + "&lon=" + longitude;
na
var endpoint = "http://api.openweathermap.org/data/2.5/weather?appid=XXX&lang=pl&lat=" + latitude + "&lon=" + longitude;
oraz 
weather = data[‘weather’][0][‘main’];
na
weather = data[‘weather’][0][‘description’];

Wszystko działa, raz jeszcze wielkie dzięki, pozdrawiam

 

 

Dot.: Skrypt pogodowy do Universal Analytics

Student ✭
Idąc jeszcze dalej, gdybym chciał jako wymiar dodatkowy wrzucić grupy produktów, które najlepiej się sprzedają przy określonej pogodzie. Tylko nie mam tych grup zdefiniowanych w Anlytycsie. Może da się przypisać do danego SKU Produktu nazwę grupy i wczytać podobnie jak w przypadku niestandardowych danych tylko jak wymiar niestandardowy?
Widziałem też że pojawił mi się nowy wymiar Kategoria produktów (Ulepszone e-commerce) tylko gdzie mogę nadać te kategorie?

Dot.: Skrypt pogodowy do Universal Analytics

Wschodząca Gwiazda
To co jest w raportach ulepszonego e-commerce w zakresie kategorii produktów musisz przesyłać Ty ze swojego sklepu podczas przesyłania danych o transakcji, wyświetleniu produktu, dodaniu do koszyka, itd.
Przejrzyj dokumentację dot. implementacji e-commerce i zwróć uwagę, że tam wszędzie przy przesyłaniu informacji o produktach pojawia się przy produkcie coś takiego:
'category': 'Nazwa Kategorii'
W ten sposób oprogramowanie sklepu przekazuje do GA info o kategorii produktu.
Tomasz Ciepłucha

Dot.: Skrypt pogodowy do Universal Analytics

Student ✭
A czy możemy użyć grup, kategorii w raportach, które nie są przekazywane z CMS-a do GA?
Wczoraj rano utworzyłem Raport niestandardowy z wymiarami pogoda i temperatura. Dzisiaj w porównaniu do standardowych raportów pokazuje ok 90% transakcji. Minęło za mało czasu i nie wszystkie dane jeszcze wpadają?

Dot.: Skrypt pogodowy do Universal Analytics

Wschodząca Gwiazda
Wydaje mi się, że może być tak, iż skrypt pogodowy nie zawsze zadziała i wtedy te niestandardowe wymiary się nie przesyłają. Wówczas jak wyświetlasz raport zawierający wymiary z pogodą to nie wyświetlają się dane sesji, w których nie były ustawione.
Tomasz Ciepłucha

Dot.: Skrypt pogodowy do Universal Analytics

Student ✭

Cześć Tomasz,

 

Niestety wywala mi komunikat weatherDone. Siedzę z tym już jakiś czas. Jesteś w stanie mi pomóc, nakierować, podpowiedzieć? Emotikon: Szczęśliwy 

 

Będę wdzięczny!

 

Screenshot at maj 10 15-01-08.png

Dot.: Skrypt pogodowy do Universal Analytics

Wschodząca Gwiazda
Rozumiem, że coś przestało Ci działa...
Z tego co widzę to nie odpala się zdarzenie weatherDone. W związku z tym dwa pytania:
1. czy uruchamia się "tag pogodowy"
2. jeśli tak, to coś powinien Ci wypisywać do konsoli javascript przy błędzie w stylu: Error while fetching weather data.... - sprawdź konsolę i napisz co tam widzisz Emotikon: Szczęśliwy
Tomasz Ciepłucha

Dot.: Skrypt pogodowy do Universal Analytics

Student ✭

Dopiero wgrywam pierwszy raz ten skrypt, wiec od początku nie działa. Wgrałem wszystko wedle instrukcji poprzez Tag Managera. Jeśli chodzi o screen, wysyłam poniżej. 

Screenshot at maj 10 16-42-32.png

 

Jeśli chodzi o odpalane tagi to wygląda to następująco:

 

Screenshot at maj 10 16-45-02.png

 

Z racji, że whetherDone nie odpala to cały Universal AnalyticsWeather nie działa. Skrypt pogodowy jak widać się uruchomił. 

Dot.: Skrypt pogodowy do Universal Analytics

Wschodząca Gwiazda
Sprawdziłeś konsolę javascript w poszukiwaniu błędów?
W przeglądarce Chrome wciśnij ctrl+shift+j i sprawdź na karcie "Console" czy masz jakieś błędy - w szczególności to co napisałem powyżej - czyli "Error while fetching weather data"
Tomasz Ciepłucha