{"id":14570,"date":"2019-11-12T11:34:08","date_gmt":"2019-11-12T09:34:08","guid":{"rendered":"https:\/\/www.dase-analytics.com\/blog\/?p=14570"},"modified":"2020-02-19T10:18:23","modified_gmt":"2020-02-19T08:18:23","slug":"ako-na-uspesny-blog-scroll-depth","status":"publish","type":"post","link":"https:\/\/www.dase-analytics.com\/blog\/sk\/ako-na-uspesny-blog-scroll-depth\/","title":{"rendered":"\u00daspe\u0161n\u00fd blog #1: Kedy je \u010dl\u00e1nok skuto\u010dne pre\u010d\u00edtan\u00fd?"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_wrap_right toc_white no_bullets\"><p class=\"toc_title\">Obsah \u010dl&aacute;nku<\/p><ul class=\"toc_list\"><li><ul><li><\/li><li><\/li><li><\/li><li><\/li><\/ul><\/li><li><ul><li><\/li><li><\/li><li><\/li><li><\/li><\/ul><\/li><li><ul><li><\/li><li><\/li><\/ul><\/li><li><\/li><\/ul><\/div>\n\n<p><strong>Scroll Depth, h\u013abka zoscrollovania, alebo v pr\u00edpade blogu aj miera pre\u010d\u00edtania \u010dl\u00e1nku je jednou zo z\u00e1kladn\u00fdch metr\u00edk pri vyhodnocovan\u00ed \u00faspe\u0161nosti blogu. Viete v\u0161ak <a href=\"#scroll-depth-html-elementu\" target=\"_blank\" rel=\"noopener\">ako z\u00edska\u0165 spr\u00e1vne d\u00e1ta<\/a>? A ako ich n\u00e1sledne <a href=\"#vyhodnotenie-scroll-depth\" target=\"_blank\" rel=\"noopener\">vyhodnoti\u0165<\/a>? Po\u010fme sa na to pozrie\u0165.<\/strong><\/p>\n<h2><span id=\"Standardna_implementacia_Scroll_Depth_cez_Google_Tag_Manager\"><span style=\"font-weight: 400;\">\u0160tandardn\u00e1 implement\u00e1cia Scroll Depth cez Google Tag Manager<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">V okt\u00f3bri roku 2017 predstavil Google nov\u00fd <strong>Scroll Depth Trigger<\/strong>, ktor\u00fd ve\u013emi jednoduch\u00fdm sp\u00f4sobom umo\u017enil u\u017e\u00edvate\u013eom mera\u0165 mieru pre\u010d\u00edtania \u010dl\u00e1nku. Trigger odp\u00e1li do <a href=\"\/blog\/category\/google-analytics\" target=\"_blank\" rel=\"noopener\">Google Analytics<\/a> zna\u010dku typu Event v\u017edy, ke\u010f u\u017e\u00edvate\u013e zoscrolluje k vopred nastaven\u00e9mu \u201c<em>checkpointu<\/em>\u201d (Scroll Depth Threshold). Checkpointy je mo\u017en\u00e9 nastavi\u0165 bu\u010f pomerovo k celkovej d\u013a\u017eke str\u00e1nky, alebo v absol\u00fatnych hodnot\u00e1ch (v pixeloch) ako vzdialenos\u0165 od za\u010diatku str\u00e1nky.<\/span><\/p>\n<h3><span id=\"1_Povolenie_premennej_Scroll_Depth_Threshold\"><span style=\"font-weight: 400;\">1. Povolenie premennej Scroll Depth Threshold<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Prv\u00fdm krokom je povolenie vstavanej premennej <strong>Scroll Depth Threshold<\/strong>, ktor\u00fa n\u00e1jdete v zozname vstavan\u00fdch premenn\u00fdch. T\u00e1to premenn\u00e1 v\u00e1m bude do dataLayera posiela\u0165 \u00fadaj o dosiahnutom checkpointe.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-14571 size-full\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-threshold-variable-gtm.png\" alt=\"Scroll Depth Threshold - Google Tag Manager\" width=\"1855\" height=\"817\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-threshold-variable-gtm.png 1855w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-threshold-variable-gtm-300x132.png 300w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-threshold-variable-gtm-1024x451.png 1024w\" sizes=\"(max-width: 1855px) 100vw, 1855px\" \/><\/p>\n<h3><span id=\"2_Nastavenie_triggera_pre_Scroll_Depth\"><span style=\"font-weight: 400;\">2. Nastavenie triggera pre Scroll Depth<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u010ealej potrebujete nastavi\u0165 trigger, ktor\u00fd m\u00e1 3 parametre: <\/span><b>smer scrollovania<\/b><span style=\"font-weight: 400;\"> (vertik\u00e1lny, horizont\u00e1lny), <\/span><b>nastavenie checkpointov<\/b><span style=\"font-weight: 400;\"> (v percent\u00e1ch, alebo v pixeloch od za\u010diatku str\u00e1nky) a <\/span><b>nastavenie str\u00e1nok pre odpa\u013eovanie zna\u010dky<\/b><span style=\"font-weight: 400;\"> (v\u0161etky str\u00e1nky, resp. len str\u00e1nky vyhovuj\u00face podmienkam).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Odpor\u00fa\u010dam odpa\u013eova\u0165 zna\u010dku len na t\u00fdch str\u00e1nkach, kde chcete Scroll Depth re\u00e1lne vyhodnocova\u0165. V na\u0161om pr\u00edpade to bud\u00fa blogov\u00e9 \u010dl\u00e1nky a eventu\u00e1lne aj v\u00fdpis \u010dl\u00e1nkov. Trackovanie zobrazenia produktov u\u017e, pravdepodobne, m\u00e1te rie\u0161en\u00e9 cez <a href=\"https:\/\/www.dase-analytics.com\/blog\/co-je-enhanced-ecommerce\/\" target=\"_blank\" rel=\"noopener\">Enhanced Ecommerce<\/a>, tak\u017ee tu by bol Scoll Depth zbyto\u010dn\u00fd.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-14574 size-full\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-trigger-gtm.png\" alt=\"Scroll Depth trigger\" width=\"1076\" height=\"817\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-trigger-gtm.png 1076w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-trigger-gtm-300x228.png 300w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-trigger-gtm-1024x778.png 1024w\" sizes=\"(max-width: 1076px) 100vw, 1076px\" \/><\/p>\n<h3><span id=\"3_Nastavenie_tagu\"><span style=\"font-weight: 400;\">3. Nastavenie tagu<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Nakoniec nastav\u00edte tag typu Event, ktor\u00fd bude do Google Analytics posiela\u0165 d\u00e1ta v po\u017eadovanom tvare. D\u00f4le\u017eit\u00e9 je nastavi\u0165 hit ako \u201c<strong>Non-Interaction<\/strong>\u201d. V opa\u010dnom pr\u00edpade by ka\u017ed\u00e9 odp\u00e1lenie zna\u010dky znamenalo nov\u00fa interakciu, \u010do by malo za n\u00e1sledok rozhodenie metriky \u201cBounce rate\u201d.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-14622 size-full aligncenter\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-tag-gtm-1.png\" alt=\"Scroll Depth Tag GTM\" width=\"961\" height=\"910\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-tag-gtm-1.png 961w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-tag-gtm-1-300x284.png 300w\" sizes=\"(max-width: 961px) 100vw, 961px\" \/><\/p>\n<h3><span id=\"Nevyhody_standardnej_implementacie_Scroll_Depth\"><span style=\"font-weight: 400;\">Nev\u00fdhody \u0161tandardnej implement\u00e1cie Scroll Depth<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Z\u00e1kladn\u00e1 implemet\u00e1cia m\u00e1 v\u0161ak svoje nedokonalosti, ktor\u00e9, m\u00f4\u017eu ma\u0165 negat\u00edvny vplyv na \u010distotu d\u00e1t.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><b>Probl\u00e9m s responzivitou webu<\/b><span style=\"font-weight: 400;\"> &#8211; predstavte si situ\u00e1ciu, kedy m\u00e1te na blogu \u013eav\u00fd postrann\u00fd sidebar a v \u0148om napr\u00edklad menu s kateg\u00f3riami \u010dl\u00e1nkov, oblak zna\u010diek, inform\u00e1cie o autorovi \u010dl\u00e1nku, vyh\u013ead\u00e1vacie okno a pod. V\u0161etky tieto prvky sa pri mobilnom zobrazen\u00ed naskladaj\u00fa nad samotn\u00fd text. \u010co to znamen\u00e1? Ak sa text \u010dl\u00e1nku na desktope za\u010d\u00ednal niekde na \u00farovni 5% d\u013a\u017eky \u010dl\u00e1nku, na mobilnom zobrazen\u00ed to m\u00f4\u017ee by\u0165 k\u013eudne aj 30%.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Miera pre\u010d\u00edtania 100%<\/b><span style=\"font-weight: 400;\"> &#8211; drviv\u00e1 v\u00e4\u010d\u0161ina webov m\u00e1 v spodnej \u010dasti p\u00e4ti\u010dku s kontaktn\u00fdmi \u00fadajmi. \u010ci sa n\u00e1v\u0161tevn\u00edk prescrolluje a\u017e sem n\u00e1s v\u00e4\u010d\u0161inou nezauj\u00edma. A \u010do napr\u00edklad sekcia s koment\u00e1rmi, pr\u00edpadne odkazy na podobn\u00e9 \u010dl\u00e1nky?\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Pou\u017e\u00edvanie kotvy v html k\u00f3de<\/b> (# selektor) &#8211; dlh\u00e9 \u010dl\u00e1nky je dobr\u00e9 rozdeli\u0165 na jednotliv\u00e9 sekcie cez kotvy a pou\u017e\u00edva\u0165 pre tieto sekcie \u0161pecifick\u00e9 URL adresy. \u010co to v\u0161ak urob\u00ed s analytikou ak n\u00e1v\u0161tevn\u00edk pr\u00edde na web cez tak\u00fato URL adresu? Ak je dan\u00e1 sekcia napr\u00edklad na \u00farovni 80% d\u013a\u017eky \u010dl\u00e1nku, trigger odp\u00e1li zna\u010dku aj pre checkpointy 25%, 50% a 75%, aj ke\u010f n\u00e1v\u0161tevn\u00edk tento obsah nikdy nevidel.<\/li>\n<\/ol>\n<h2 id=\"scroll-depth-html-elementu\"><span id=\"Ako_to_robit_lepsie\"><span style=\"font-weight: 400;\">Ako to robi\u0165 lep\u0161ie?<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">\u0160tandardn\u00e9 nastavenie Scroll Depth tagu v GTM vyhodnocuje cel\u00fa d\u013a\u017eku strany &#8211; od horn\u00e9ho menu po koniec p\u00e4ti\u010dky. S nasledovn\u00fdm postupom m\u00f4\u017eete vyhodnocova\u0165 <strong>Scroll Depth pre konkr\u00e9tny element na str\u00e1nke<\/strong>. Z\u00edskate tak \u010distej\u0161ie d\u00e1ta, ktor\u00e9 sa bud\u00fa lep\u0161ie vyhodnocova\u0165.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Postupova\u0165 budete tak, \u017ee zist\u00edte v\u00fd\u0161ku sledovan\u00e9ho elementu, ktor\u00fd idete sledova\u0165 a vzdialenos\u0165 tohto elementu od za\u010diatku str\u00e1nky. Jednotliv\u00e9 checkpointy sa jednoducho prer\u00e1taj\u00fa na absol\u00fatne hodnoty v pixeloch.<\/span><\/p>\n<h3><span id=\"1_Vlastna_premenna_na_dynamicke_urcovanie_checkpointov\"><span style=\"font-weight: 400;\">1. Vlastn\u00e1 premenn\u00e1 na dynamick\u00e9 ur\u010dovanie checkpointov<\/span><\/span><\/h3>\n<p>V Google Tag Manageri si vytvor\u00edte vlastn\u00fa premenn\u00fa, ktor\u00e1 dynamicky vypo\u010d\u00edta poz\u00edciu jednotliv\u00fdch checkpointov pri akomko\u013evek dlhom \u010dl\u00e1nku. Ak v\u00e1s zauj\u00edma kompletn\u00e1 logika tohto nastavenia, odpor\u00fa\u010dam <a href=\"https:\/\/www.simoahava.com\/analytics\/customize-scroll-depth-trigger\/#4-track-scroll-percentages-of-a-specific-content-element\" target=\"_blank\" rel=\"noopener\">\u010dl\u00e1nok od Sima Ahavu<\/a>, od ktor\u00e9ho som sa in\u0161piroval.<\/p>\n<pre class=\"lang-none prettyprint prettyprinted\">function() {\r\n  \r\n  if (typeof window._gtm_scroll_set === 'undefined') {\r\n    \r\n    \/\/ Zme\u0148te hodnoty po\u013ea pod\u013ea toho, v ak\u00fdch krokoch chcete Scroll Depth vyhodnocova\u0165\r\n    var verticalPercentages = [25,50,75,100];\r\n  \r\n    \/\/ Zme\u0148te ozna\u010denie html elementu, ktor\u00fd chcete trackova\u0165\r\n    var targetElement = document.querySelector('div.post-content .main-content-wrap');\r\n  \r\n    var elementHeight = targetElement.offsetHeight;\r\n  \r\n    var totalOffsetTop = 0;\r\n  \r\n    while (targetElement) {\r\n      totalOffsetTop += (targetElement.offsetTop - targetElement.scrollTop + targetElement.clientTop);\r\n      targetElement = targetElement.offsetParent;\r\n    }\r\n    \r\n    window._gtm_scroll_set = {\r\n      thresholds: verticalPercentages.map(function(percentage) {\r\n          return parseInt(elementHeight * (percentage * 0.01) + totalOffsetTop);\r\n        }).join(),\r\n      percentages: verticalPercentages\r\n    };\r\n    \r\n  }\r\n  \r\n  return window._gtm_scroll_set.thresholds;\r\n}\r\n<\/pre>\n<h3><span id=\"2_Vytvorenie_triggeru_typu_Scroll_Depth\"><span style=\"font-weight: 400;\">2. Vytvorenie triggeru typu Scroll Depth<\/span><\/span><\/h3>\n<p>Vy\u0161\u0161ie uveden\u00fd javascript v\u00e1m vr\u00e1ti pri ka\u017edom jednom \u010dl\u00e1nku pole checkpointov, na z\u00e1klade ktor\u00fdch bude trigger odpa\u013eova\u0165 zna\u010dku do Google Analytics. \u010ealej si vytvor\u00edte trigger typu Scroll Depth:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-14600 size-full\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-trigger-gtm-1.png\" alt=\"Scroll Depth Trigger Google Tag Manager\" width=\"1057\" height=\"659\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-trigger-gtm-1.png 1057w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-trigger-gtm-1-300x187.png 300w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-trigger-gtm-1-1024x638.png 1024w\" sizes=\"(max-width: 1057px) 100vw, 1057px\" \/><\/p>\n<h3><span id=\"3_Spatny_prepocet_pixelov_na_percenta\"><span style=\"font-weight: 400;\">3. Sp\u00e4tn\u00fd prepo\u010det pixelov na percent\u00e1<\/span><\/span><\/h3>\n<p>Trigger odp\u00e1li zna\u010dku v\u017edy, ke\u010f u\u017e\u00edvate\u013e dosiahne vami definovan\u00fa percentu\u00e1lnu \u00farove\u0148 zoscrollovania. Ke\u010f\u017ee do Google Analytics nechcete posiela\u0165 nes\u00farod\u00e9 inform\u00e1cie o poz\u00edcii checkpointov v pixeloch, vytvor\u00edte si e\u0161te jednu vlastn\u00fa premenn\u00fa. T\u00e1to premenn\u00e1 sp\u00e4tne &#8222;prer\u00e1ta&#8220; absol\u00fatne hodnoty v pixeloch na percent\u00e1.<\/p>\n<pre class=\"lang-none prettyprint prettyprinted\">function() {\r\n  if (typeof window._gtm_scroll_set !== 'undefined') {\r\n    \r\n    var percentages = window._gtm_scroll_set.percentages;\r\n  \r\n    var thresholds = window._gtm_scroll_set.thresholds.split(',').map(function(t) {\r\n      return parseInt(t);\r\n    });\r\n    \r\n    var crossedIndex = thresholds.indexOf({{Scroll Depth Threshold}});\r\n\r\n    return percentages[crossedIndex];\r\n  \r\n  }\r\n  return {{Scroll Depth Threshold}};\r\n}\r\n<\/pre>\n<h3><span id=\"4_Vytvorenie_tagu\"><span style=\"font-weight: 400;\">4. Vytvorenie tagu<\/span><\/span><\/h3>\n<p>Nakoniec vytvor\u00edte tag typu event, ktor\u00fdm budete posiela\u0165 do Google Analytics d\u00e1ta v takej podobe, v akej potrebujete. Nezabudnite v menovke udalosti (Event Label) prida\u0165 za premenn\u00fa znak percenta.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-14604 size-full\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-tag-gtm.png\" alt=\"Scroll Depth - Google Tag Manager nastavenie tagu\" width=\"1058\" height=\"1003\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-tag-gtm.png 1058w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-tag-gtm-300x284.png 300w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-tag-gtm-1024x971.png 1024w\" sizes=\"(max-width: 1058px) 100vw, 1058px\" \/><\/p>\n<h2 id=\"vyhodnotenie-scroll-depth\"><span id=\"Vyhodnotenie_dat_v_Google_Data_Studiu\"><span style=\"font-weight: 400;\">Vyhodnotenie d\u00e1t v Google Data Studiu<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Ak ste aplikovali Scroll Depth pod\u013ea vy\u0161\u0161ie uveden\u00e9ho postupu, m\u00f4\u017eete d\u00e1ta o miere zoscrollovania blogov\u00fdch \u010dl\u00e1nkov vyhodnoti\u0165 v Google Data Studiu. Ni\u017e\u0161ie n\u00e1jdete dva pr\u00edklady, ako tieto d\u00e1ta vyhodnocova\u0165. Mo\u017enost\u00ed je, samozrejme, ove\u013ea viac a ur\u010dite ocen\u00edm, ak sa o va\u0161e Best Practices podel\u00edte v koment\u00e1roch pod \u010dl\u00e1nkom.<\/span><\/p>\n<h3><span id=\"1_Prehlad_vsetkych_clankov\"><span style=\"font-weight: 400;\">1. Preh\u013ead v\u0161etk\u00fdch \u010dl\u00e1nkov<\/span><\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Vytvor\u00edte pruhov\u00fd graf<\/strong>, kde:<\/span>\n<ol style=\"list-style-type: lower-alpha;\">\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Dimenzia = Menovka udalost\u00ed (y-os)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Metrika = S\u00fa\u010det udalost\u00ed (x-os), m\u00f4\u017eeme nastavi\u0165 v\u00fdpo\u010det porovnanie d\u00e1t ako \u201c<em>Percento z celku<\/em>\u201d<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Filter = vyfiltrujeme udalosti (eventy), pre Scroll depth: <\/span><em><span style=\"font-weight: 400;\">Zahrn\u00fa\u0165 &#8211; Kateg\u00f3ria udalost\u00ed &#8211; Rovn\u00e1 sa (=) &#8211; Scroll Depth<\/span><\/em><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><em><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-14611 size-full\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-graf.png\" alt=\"Google Data Studio Scroll Depth\" width=\"722\" height=\"879\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-graf.png 722w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-graf-246x300.png 246w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><\/em><\/p>\n<ol start=\"2\">\n<li style=\"font-weight: 400;\"><strong>Vytvor\u00edte tabu\u013eku \u010dl\u00e1nkov<\/strong>\n<ol style=\"list-style-type: lower-alpha;\">\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Dimenzia = N\u00e1zov str\u00e1nky<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Metrika = Zobrazenia str\u00e1nky<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Zoradi\u0165 = Zobrazenia str\u00e1nky (zostupne)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Interakcie = Pou\u017ei\u0165 filter<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-14614 size-full\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-tabulka.png\" alt=\"Google Data Studio Scroll Depth - tabu\u013eka \u010dl\u00e1nkov\" width=\"873\" height=\"806\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-tabulka.png 873w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-tabulka-300x277.png 300w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><\/p>\n<ol start=\"3\">\n<li><strong>Dopln\u00edte preddefinovan\u00e9 pole \u201c<em>Rozsah d\u00e1tumov<\/em>\u201d<\/strong><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Takto n\u00e1m vznikne jednoduch\u00fd, preh\u013eadn\u00fd a najm\u00e4 interakt\u00edvny report v\u00fdkonnosti \u010dl\u00e1nkov z poh\u013eadu Scroll Depth:<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-14618 size-full\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-data-studio-zoznam-clankov.png\" alt=\"Zoznam \u010dl\u00e1nkov, Data Studio, Scroll Depth\" width=\"1106\" height=\"838\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-data-studio-zoznam-clankov.png 1106w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-data-studio-zoznam-clankov-300x227.png 300w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/scroll-depth-data-studio-zoznam-clankov-1024x776.png 1024w\" sizes=\"(max-width: 1106px) 100vw, 1106px\" \/><\/p>\n<h3><span id=\"2_Heat_mapa_pre_jeden_konkretny_clanok\"><span style=\"font-weight: 400;\">2. Heat mapa pre jeden konkr\u00e9tny \u010dl\u00e1nok<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Na za\u010diatok mus\u00edm poveda\u0165, \u017ee heat mapa v pravom slova zmysle aktu\u00e1lne v Google Data Studiu nie je. Tento n\u00e1vod je teda len ak\u00fdsi hack pre fajn\u0161mekrov s vyu\u017eit\u00edm tabu\u013ekovej heat mapy.\u00a0<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Vytvor\u00edte si tabu\u013eku s teplotnou mapou<\/strong>, kde:<\/span>\n<ol style=\"list-style-type: lower-alpha;\">\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Dimenzia = Menovka udalost\u00ed<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Metrika = S\u00fa\u010det udalost\u00ed<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Zoradenie = S\u00fa\u010det udalost\u00ed (od najv\u00e4\u010d\u0161ej hodnoty)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Filter pre udalosti (eventy) Scroll depth: <\/span><em><span style=\"font-weight: 400;\">Zahrn\u00fa\u0165 &#8211; Kateg\u00f3ria udalost\u00ed &#8211; Rovn\u00e1 sa (=) &#8211; Scroll Depth<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Filter pre konkr\u00e9tnu str\u00e1nku, ktor\u00fa chceme analyzova\u0165: <\/span><em><span style=\"font-weight: 400;\">Zahrn\u00fa\u0165 &#8211; N\u00e1zov str\u00e1nky &#8211; Rovn\u00e1 sa (=) &#8211; {{v\u00e1\u0161 n\u00e1zov str\u00e1nky}}<\/span><\/em><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-14620 size-full\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-heatmap.png\" alt=\"Heatmap in Google Data Studio\" width=\"1180\" height=\"884\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-heatmap.png 1180w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-heatmap-300x225.png 300w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-heatmap-1024x767.png 1024w\" sizes=\"(max-width: 1180px) 100vw, 1180px\" \/><\/p>\n<ol start=\"2\">\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Uprav\u00edte vizu\u00e1lnu podobu tabu\u013eky<\/strong> na karte \u201c\u0160t\u00fdl\u201d<\/span>\n<ol style=\"list-style-type: lower-alpha;\">\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Zobrazi\u0165 hlavi\u010dku = nie<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u0160t\u00edtky tabu\u013eky = 96 px<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Zobrazi\u0165 str\u00e1nkovanie = nie<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Metriky &gt; Teplotn\u00e1 mapa = odpor\u00fa\u010dam zvoli\u0165 zelen\u00fa farbu<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Pozadie a okraj &gt; Prieh\u013eadnos\u0165 = 50 %<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">St\u013apec s menovkami udalost\u00ed umiestnime za okraj h\u00e1rku \ud83d\ude42<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Po\u010dty udalost\u00ed prekryte nejak\u00fdm predpripraven\u00fdm grafick\u00fdm prvkom \ud83d\ude42<\/span><\/li>\n<\/ol>\n<\/li>\n<li>T<span style=\"font-weight: 400;\">eraz potrebujete <strong>screenshot \u010dl\u00e1nku<\/strong>, ktor\u00fd analyzujeme. Najjednoduch\u0161ie je pou\u017ei\u0165 roz\u0161\u00edrenie do Chromu s n\u00e1zvom <em>Full Page Screen Capture<\/em>.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Vytvoren\u00fd <strong>screenshot vlo\u017e\u00edte do h\u00e1rku<\/strong> v Data Studiu a umiestnite ho pod poloprieh\u013eadn\u00fa tabu\u013eku tak, aby za\u010diatok aj koniec tabu\u013eky l\u00edcovali s elementom na str\u00e1nke, pre ktor\u00fd zis\u0165ujeme Screen depth.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">K heat mape <strong>dopln\u00edte preh\u013eady po\u010dtov udalost\u00ed pre jednotliv\u00e9 checkpointy<\/strong>. Pre checkpoint s hodnotou 25 % to bude:<\/span>\n<ol style=\"list-style-type: lower-alpha;\">\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Metrika = S\u00fa\u010det udalost\u00ed (premenovan\u00e1 na \u201cPo\u010det zobrazen\u00ed str\u00e1nky do h\u013abky 25 %\u201d)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Filter pre udalosti (eventy) Scroll depth s hodnotou 25%: <\/span><em><span style=\"font-weight: 400;\">Zahrn\u00fa\u0165 &#8211; Menovka udalost\u00ed &#8211; Rovn\u00e1 sa (=) &#8211; 25 %<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Filter pre konkr\u00e9tnu str\u00e1nku, ktor\u00fa chceme analyzova\u0165: <\/span><em><span style=\"font-weight: 400;\">Zahrn\u00fa\u0165 &#8211; N\u00e1zov str\u00e1nky &#8211; Rovn\u00e1 sa (=) &#8211; {{v\u00e1\u0161 n\u00e1zov str\u00e1nky}}<\/span><\/em><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Pre \u00faplnos\u0165 m\u00f4\u017eete analogicky doplni\u0165 aj <strong>celkov\u00fd po\u010det zobrazen\u00ed<\/strong>\u00a0\u010dl\u00e1nku.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Nakoniec <strong>dopln\u00edte popisky riadkov<\/strong> heat mapy ako textov\u00e9 polia pre lep\u0161iu preh\u013eadnos\u0165.<\/span><\/li>\n<\/ol>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-14627 size-full\" src=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-heatmap-final.png\" alt=\"Heat map Google Data Studio\" width=\"1106\" height=\"838\" srcset=\"https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-heatmap-final.png 1106w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-heatmap-final-300x227.png 300w, https:\/\/www.dase-analytics.com\/blog\/wp-content\/uploads\/datastudio-scrolldepth-heatmap-final-1024x776.png 1024w\" sizes=\"(max-width: 1106px) 100vw, 1106px\" \/><\/p>\n<h2 id=\"vyhodnotenie-scroll-depth\"><span id=\"Zaver\"><span style=\"font-weight: 400;\">Z\u00e1ver<\/span><\/span><\/h2>\n<p>Vyhodnoti\u0165 \u00faspe\u0161nos\u0165 blogov\u00fdch \u010dl\u00e1nkov a blogu samotn\u00e9ho je v\u0161ak <strong>nemo\u017en\u00e9 na z\u00e1klade jednej jedinej metriky<\/strong>. Ak v\u00e1s problematika analytiky pre v\u00e1\u0161 obsahov\u00fd web zauj\u00edma hlb\u0161ie, prihl\u00e1ste sa na odber newslettera. U\u017e \u010doskoro sa m\u00f4\u017eete te\u0161i\u0165 na \u010fal\u0161ie tipy pre \u00faspe\u0161n\u00fd blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scroll Depth, h\u013abka zoscrollovania, alebo v pr\u00edpade blogu aj miera pre\u010d\u00edtania \u010dl\u00e1nku je jednou zo z\u00e1kladn\u00fdch metr\u00edk pri&#8230;<\/p>\n","protected":false},"author":70,"featured_media":14645,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[639,200],"tags":[666],"_links":{"self":[{"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/posts\/14570"}],"collection":[{"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/users\/70"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/comments?post=14570"}],"version-history":[{"count":49,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/posts\/14570\/revisions"}],"predecessor-version":[{"id":15336,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/posts\/14570\/revisions\/15336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/media\/14645"}],"wp:attachment":[{"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/media?parent=14570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/categories?post=14570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dase-analytics.com\/blog\/sk\/wp-json\/wp\/v2\/tags?post=14570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}