Page load performance

description

Evolution of Page Load Time by Simo Ahava, PageLoadPerformance reports on the loading time of each page

setup

Please refer to the container setup instructions

This can look like this in data studio

gtm tags

santianoEvent - Page Load performance

santianoEvent - Page Load performance
Tag Type : Custom HTML
Reports on the time the pageURL took to load.

  <script>
// Evolution of Simo's tutorial on Page Load Times
// https://www.simoahava.com/analytics/page-load-time-universal-analytics/
// I Modified it to look good on Google Data Studio :)
// and added extra steps to show when we pages take more than 6 seconds to load

// !!! This depends on the santianoEvent Tag
  
var perfData = window.performance.timing;
var pageLoadTime = perfData.domComplete - perfData.navigationStart;
var loadTime = "";
var pageLoadTimeInSecs = parseFloat(pageLoadTime / 1000).toFixed(2);

if (pageLoadTime < 1000) { loadTime = "0-1 seconds"; }
else if (pageLoadTime < 2000) { loadTime = "1-2 seconds"; }
else if (pageLoadTime < 3000) { loadTime = "2-3 seconds"; }
else if (pageLoadTime < 4000) { loadTime = "3-4 seconds"; }
else if (pageLoadTime < 5000) { loadTime = "4-5 seconds"; }
else if (pageLoadTime < 6000) { loadTime = "5-6 seconds"; }
else if (pageLoadTime < 7000) { loadTime = "6-7 seconds"; }
else if (pageLoadTime < 8000) { loadTime = "7-8 seconds"; }
else if (pageLoadTime < 9000) { loadTime = "8-9 seconds"; }
else if (pageLoadTime < 10000) { loadTime = "9-10 seconds"; }
else { loadTime = "More than 10 seconds"; }

 
dataLayer.push({'event': 'santianoEvent',
                 'eventCommand': 'pageLoadPerformance',
                 'eventCategory': 'Page Load Performance', 
                 'eventAction': loadTime,
                 'eventLabel': {{pageURL}},
                 // 'eventSegment': pageLoadTimeInSecs +' seconds',
                 // 'eventPartition': undefined
                });

</script>

gtm triggers

Event - santianoEvent - pageLoadPerformance

Event - santianoEvent - pageLoadPerformance
Trigger Type : Custom Event
Trigger to plug to the event tag on your favorite Webanalytics platform
Event Name equals santianoEvent Event Command equals pageLoadPerformance

Window Loaded - All

Window Loaded - All
Trigger Type : Window Loaded
When the page is fully loaded
This triggers fires on : All Window Loaded Events

gtm variables

eventCommand

eventCommand
Variable Type : Data Layer Variable
santiano.io comes with its specific eventCommand : its naming scheme facilitates management and maintenance of events tags and ecommerce tags.

  Data Layer Variable Name  : eventCommand 
Data Layer Version : Version 2

pageUrl

pageUrl
Variable Type : URL
Provides the URL of the page being loaded

  Component Type : Full URL

santianoApacheV2.0Licence

santianoApacheV2.0Licence
Variable Type : Custom Javascript

    function() {
  // santiano.io is released under Apache V2.0 licence.
  // 
  // Copyright 2018 Santiano Consulting SAS (santiano.io)
  // 
  // Licensed under the Apache License, Version 2.0 (the "License");
  // you may not use this file except in compliance with the License.
  // You may obtain a copy of the License at
  // 
  // http://www.apache.org/licenses/LICENSE-2.0
  // 
  // Unless required by applicable law or agreed to in writing, software
  // distributed under the License is distributed on an "AS IS" BASIS,
  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  // See the License for the specific language governing permissions and
  // limitations under the License.
    return 'santiano.io is released under Apache V2.0 licence';
  }

Add comment

Download

	Measuring Page Load Times
[][][][][]  "0-1 seconds"
[][][][]    "1-2 seconds"
[][][]      "2-3 seconds"
[][]        "3-4 seconds"
[][         "4-5 seconds"
[]          "5-6 seconds"
[           "6-7 seconds"
[           "7-8 seconds"
[           "8-9 seconds"
[           "9-10 seconds"
[]          "More..."

santianoEvent
-> "pageLoadPerformance"

You are here