Skip to content

Instantly share code, notes, and snippets.

@norisk-marketing

norisk-marketing/Google Analytics Challenge 2018: PAGE SPEED (Alexander Groß).md

Last active January 18, 2019 23:09
Show Gist options
  • Save norisk-marketing/21c11147368ba1a2d95cb3d3bfa903a8 to your computer and use it in GitHub Desktop.
Save norisk-marketing/21c11147368ba1a2d95cb3d3bfa903a8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Google Analytics Challenge 2018: PAGE SPEED (Alexander Groß).md

norisk GA Challenge

Hallo Zusammen,

Danke fürs Zuhören bei meinem Vortrag zur Analytics Challenge auf der Analytics Summit am 7.11. Schön, dass ihr hier vorbeischaut. Wie versprochen gibts hier die Erklärungen für das Page Speed Dashboard und die Datensammlung. Wenn Ihr Fragen oder Verbesserungsvorschläge habt, schreibt mir gerne eine Mail. Wer Interesse an einem vertieften Austausch hat, sprecht mich gerne auf der Analytics Summit an oder schickt mir gerne Kontaktaufnahme auf Xing, falls sich ein Austausch vor Ort nicht ergibt.

Die Folien vom Vortrag findet ihr auf Slideshare

Viel Spaß beim Analysieren!

Euer Alexander

0. Ziel

Ziel dieses Readme's ist Dir zu helfen, folgendes Dashboard mit eigenen Website-Daten zu befüllen:

Dashboard

1. Seitentyp an Google Analytics übergeben

Du brauchst:

  • Custom JS / DataLayer Variable im GTM
  • Custom Dimension in GA

Im Google Tag Manager legst Du eine neue Variable an (entweder DataLayer oder Custom JS). Wenn der Seitentyp im DataLayer verfügbar ist, kannst Du diese Variable direkt auf den DataLayer-Eintrag mappen. Wenn der Seitentyp nicht im DataLayer verfügbar ist, kannst Du in einer Custom JS Variable eine Regex-Exktration hinterlegen. Wenn Du kein Regex kannst, bitte einen Entwickler Dir zu helfen oder schau mal auf regex101.com vorbei.

In Deinem GA Account legst Du eine neue Custom Dimension an mit dem Namen "Seitentyp". Merk Dir den Index der Dimension und trage diesen in Deinem GA Pageview Tag als Custom Dimension ein. Als Wert trägst Du die vorher angelegte Variable ein. Nur noch testen und veröffentlichen und Du hast es geschafft.

2. First Contentful Paint

Du brauchst:

  • 1 Custom HTML Tag
  • 1 Google Analytics Event Tag

Im Custom HTML Tag trägst Du folgenden Code ein:

<script>
  if(window.performance){
  	var dataLayer = dataLayer || [];
	var list = window.performance.getEntries();
    var timing;
    
    for(var i = 0; i < list.length; i++){
      var entry = list[i];
      if(entry.entryType == "paint"){
        timing = entry;
        break;
      }
    }
    if(timing) {
      var startTime = timing.startTime / 1000;
      startTime = startTime.toFixed(2);
      dataLayer.push({
   	    event : "First Paint",
        first_paint_time : startTime
      });
    }
  }
</script>

Im Google Analytics Event Tag trägst Du als Event-Kategorie bspw. "Timing", als Aktion bspw. "First Contentful Paint" und als Label zum Beispiel "Page Path" oder "Seitentyp" ein. Als Event-Value referenzierst du eine neue DataLayer Variable, die den DataLayer-Eintrag "first_paint_time" referenziert. Erstelle nun einen Trigger, der beim Event "First Paint" auslöst und speichere. Du kannst nun testen und bei Erfolg veröffentlichen!

3. Eindbindung Page Speed Insights API via App Scripts und Spreadsheet

Du brauchst:

Lege ein App Script Projekt an und ein neues Spreadsheet. Hinterlege im App Script folgenden Code. Ändere dort die URLs die Du überwachen möchtest und trage die ID des neuen Spreadsheets in der entsprechenden Variable ein. Benenne das erste Tabellenblatt des Spreadsheets wie im Code in der Variable "SHEET_NAME" angegeben.

Hole Dir von Google einen API Key und hinterlege ihn in der Konfigurationsvariable im Skript "API_KEY".

Starte das Skript und prüfe, ob die Daten im Spreadsheet eingetragen wurden. Wenn das erfolgt ist, bist Du fertig!

function get_demo_gachallenge_PageSpeedData() {
  
 // *************************************************
 // ********** START OF CONFIGURATION ***************
  
 var FILTER_3RD_PARTY = "true";
  
 // Retrieve your API Key here and select a cloud console project: https://developers.google.com/speed/docs/insights/v4/first-app?hl=th
 var API_KEY = "AIzaSyBNzU7wb9eCTdDJjtufJsvrPfDzIVuGbPE"; 
 
 var urls = {
  GLO_Home : 'https://www.globetrotter.de',
  GLO_Alist : 'https://www.globetrotter.de/outdoorjacken-herren/',
  GLO_Marke : 'https://www.globetrotter.de/marken/deuter/',
  GLO_Search : 'https://www.globetrotter.de/search/?q=klettergurt&ms=true',
  GLO_Details : 'https://www.globetrotter.de/shop/arcteryx-ar-395a-harness-266524/',
  BF_Home : 'https://www.bergfreunde.de',
  BF_Alist : 'https://www.bergfreunde.de/kletterschuhe/',
  BF_Marke : 'https://www.bergfreunde.de/marken/petzl/',
  BF_Search : 'https://www.bergfreunde.de/s/petzl/?searchparam=petzl&iBfResetSorting=1',
  BF_Details : 'https://www.bergfreunde.de/petzl-hirundos-klettergurt/',
 };
     
 // Make a COPY of this demo sheet and paste your URL here:
 var SHEET_URL = "https://docs.google.com/spreadsheets/d/1hqhLPadvQx02rO9bQnRrxs83kGyLE8HGOeQtkjIJC0I/edit?pli=1#gid=0"
 var SHEET_NAME = "G_PageSpeed";

 // ********** END OF CONFIGURATION *************** 
 // *********************************************** 
  
 //*********** DO NOT CHANGE ANYTHING BELOW THIS LINE !!! *****
 
 // Iterate through urls object and check existence of seoStrings aka stringsToBeSearched
 
 var allUrlInfo = [];
 var headerRow = ["pageType", "URL", "MobileSpeed", "DesktSpeed","MobileFirstPaint","DesktopFirstPaint", "Ressourcen","Hosts","Anzahl .js","Anzahl .css","html (KB)", "css (KB)", "Bild (KB)", "js (KB)"];
 
 for (var key in urls) {
   if (!urls.hasOwnProperty(key)) break;
   
   var requestMobile = "https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=" + encodeURI(urls[key]) + "&filter_third_party_resources=" + FILTER_3RD_PARTY + "&strategy=mobile&key=" + API_KEY;
   var requestDesktop = "https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=" + encodeURI(urls[key]) + "&filter_third_party_resources=" + FILTER_3RD_PARTY + "&strategy=desktop&key=" + API_KEY;
  
   var responseMobile = JSON.parse(UrlFetchApp.fetch(requestMobile));
   var responseDesktop = JSON.parse(UrlFetchApp.fetch(requestDesktop));
   
   var mobileRuleGroups = responseMobile.ruleGroups;
   var desktopRuleGroups = responseDesktop.ruleGroups; 
   var mobilePageStats = responseMobile.pageStats;
   
   var mobileLoadingExperience = responseMobile.loadingExperience;
   var desktopLoadingExperience = responseDesktop.loadingExperience;
     
   Logger.log(responseMobile);
   
   var mobileFcpMedian = (responseMobile.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.median/1000).toFixed(2);
   var desktopFcpMedian = (responseDesktop.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.median/1000).toFixed(2);

   var singleUrlInfo = [];
   
   singleUrlInfo.push(
      key.toString(),urls[key],
      mobileRuleGroups.SPEED.score, desktopRuleGroups.SPEED.score, mobileFcpMedian, desktopFcpMedian,
      mobilePageStats.numberResources, mobilePageStats.numberHosts, 
      mobilePageStats.numberJsResources, mobilePageStats.numberCssResources,
      mobilePageStats.htmlResponseBytes/1000, mobilePageStats.cssResponseBytes/1000,
      mobilePageStats.imageResponseBytes/1000, mobilePageStats.javascriptResponseBytes/1000
    );
   
   allUrlInfo.push(singleUrlInfo);
 }
 
 // Prints the allProductUrlInfo to a spreadsheet
 var ss = SpreadsheetApp.openByUrl(SHEET_URL);
 var sheet = ss.getSheetByName(SHEET_NAME);
 sheet.getRange('a:z').clearContent();
  
 // Sets header values
 sheet.getRange(1,1,1,headerRow.length).setValues([headerRow]);
  
 var destinationRange = sheet.getRange(2, 1, allUrlInfo.length, allUrlInfo[0].length);
 destinationRange.setValues(allUrlInfo);
  
}

4. Dashboard einbinden

Du brauchst:

  • erstmal nichts ;)

Jetzt legen wir das eigentliche Dashboard an. Rufe hierzu die folgende URL auf, logge Dich ggf. mit Deinem Google Account ein und kopiere das Google Data Studio Dashboard:

https://datastudio.google.com/open/1VMRUZ5vBl7akaYsDj1b5YVs9_GNjodyQ

Du wirst aufgefordert eine neue Datenquelle anzugeben. Hier wählst Du die entsprechende Google Analytics View und das unter 3. erstellte Spreadsheet aus (das Icon der Spreadsheet Datenquelle sieht aus wie eine kleine Tabelle) und erstellst das Dashboard. Das Dashboard wird nun geklont und du kannst anfangen zu personalisieren. Prüfe, ob unter "3. NACH SEITENTYP" schon die entsprechenden Werte angezeigt werden. Sollte hier ein Konfigurationfehler auftreten, wähle das Tabellen-Widget an und prüfe im Reiter "Daten" die Dimensionen. Hier sollte Deine "Seitentyp" Variable eingetragen sein. Wenn nicht, musst Du nachträglich eintragen.

Die Überschriften des Diagramms werden etwas verschoben sein und sich überlappen. Das liegt daran, dass wir durch Abkürzungen Platz sparen, diese Abkürzungen aber nicht beim Kopieren übernommen werden. Damit das Ganze ordentlich aussieht, wähle im Hauptmenü den Punkt "Ressource" aus und klicke auf "Hinzugefügte Datenquellen verwalten". Wähle nun Bearbeiten bei der Datenquelle aus und suche nach den Metriken "Durchschn. Serverantwortzeit", "Durchschn. Seitenladezeit" und "Durchschn. Dokumentenladezeit". Du kannst jeweils per Klick auf die Metrik ihren globalen Namen im Dashboard verändern, bspw. "SRT", "CLT" und "PLT".

Unter dem 4. Punkt sollten auch schon Deine Page Speed Daten und Benchmarks aufgeführt sein.

Prüfe nun auf Seite 3, ob die Daten zu First Contentful Paint korrekt eingetragen werden. Wenn nicht, gehe auf "Ressource" und "Zusammengeführte Daten verwalten" und prüfe, ob bei der zweiten Datenquelle Datum und Seitentyp als JOIN-Schlüssel und "Durchschn. Wert" als Metrik (Du kannst diese beliebig umbennen) angegeben sind. Zudem brauchst Du in der zweiten Datenquelle einen Filter, der nur die voher angelegten Timing Events mit First Contentful Paint einschließt (Ereigniskategorie == "First Paint").

Geschafft!

5. Network Connection Speed

Für Messung des Network Connection Speed brauchst Du folgendes:

  • GA Event-Tag im GTM
  • Custom JS Variable

Das GA Event-Tag legst Du wie gewohnt an, das Tag soll auf allen Seiten ausgeführt werden. Als Ereigniskategorie hinterlegst Du am Besten "Network Timing", als Ereignisaktion hinterlegst Du eine neue Custom JS Variable, die eines der folgenden Code-Snippets beinhalten soll:

Manuelle Berechnung

function() {
	var unit = "MBps";
	var sum_size = 0;
	var sum_time = 0;
	for (var i = 1; i < window.performance.getEntries().length; i++) {
		var entry = window.performance.getEntries()[i];
		//var size = entry.decodedBodySize / (1024);
		//var size = entry.transferSize / (1024);
		var size = entry.encodedBodySize * 8;
		var time = (entry.responseEnd - entry.responseStart) / 1000;
		var speed = (size / time) / (1024 * 1024);
		if (typeof speed == "number" && typeof time == "number" && typeof size == "number" && size > 0 && time > 0.081) {
			console.log(entry);
			console.log("speed: " + speed);
			console.log("time: " + time);
			console.log("size: " + size);
			console.log("############");
			sum_size += size;
			sum_time += time;
		}
	}
	var sum_result = (sum_size / sum_time) / (1024 * 1024);
	console.log("Overall sum result: " + sum_result.toFixed(2) + " " + unit);
	var speed_class;
	if(sum_result < 0.256){
		speed_class = "E (0 - 256 KBps)";
	}
	else if(sum_result < 0.384){
		speed_class = "slow 3G (256 - 384 KBps)";
	}
	else if(sum_result < 7.2){
		speed_class = "regular 3G (384 - 7,2 MBps)";
	}
	else if(sum_result < 42){
		speed_class = "fast 3G (7,2 - 42 MBps)";
	}
	else if(sum_result < 300){
		speed_class = "LTE (42 - 300 MBps)";
	}
	else {
		speed_class = "LTE Advanced (from 300 MBps)";
	}

	return speed_class;
}

Berechnung über Network Information API:

function(){
  if(typeof navigator.connection != "undefined"){
  	return navigator.connection.effectiveType;
  } 
  return "N/A";
}

Jetzt hast Du in den Ereignissen in GA die entsprechenden Messwerte und kannst basierend darauf weiter analysieren.

Top, Geschafft!

Du hast nun alles was du brauchst für die umfängliche Messung des Page Speeds Deiner Website. Ausgezeichnet! Falls weitere Fragen entstehen, gerne unten kommentieren oder eine Email an: agross@noriskshop.de

Viel Spaß beim Analysieren,

Euer Alexander

nor-logo-rgb-schwarz 1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment