Začínáme s Vistag tagováním

  1. Názvosloví

    1. Dashboard - webový panel na https://vistag.com obsaující registraci, nastavení, statistické přehledy.
    2. Webscript - script vložený do webu straně klienta. Zajišťuje vkládání a zobrazení vistagů.
    3. Doména - doména webové stránky kde byl vložen script. Rozlišujeme subdomény mimo www před doménou.
  2. Registrace

    1. Součástí registrace účtu je

      1. Doména (url adresa), kde se bude script vkládat a kde budeme ověřovat správné vložení scriptu.
      2. Registrační email a přihlašovací heslo. Po registraci lze přidat další uživatele s přístupem do účtu, nicméně první email uvedený při registraci má statut správce a jsou na něj zasílány účetní doklady (v případě placené verze).
    2. V druhém kroku registrace získáte script

      <script defer src=“https://cdn.vistag.com/script.js#1”></script>
      
      1. Jedná se o link na javascriptový soubor, který obsahuje celou aplikaci Vistag.

      2. Atribut defer říká prohlížeči; načti Vistag aplikaci až po celém obsahu, tj. jako poslední.

      3. Hodnota za # v url adrese scriptu značí id účtu.

      4. Script vložte do HTML klientského webu před značku </head>. Je ale možné vložit script na kterékoliv vhodné místo v kódu.

      5. Po vložení scriptu systém automaticky detekuje správné propojení a aktualizuje dashboard. Klientský web se objeví v dashboardu.

      6. Na straně webu klienta (kde byl script vložen) se u vhodných obrázků objeví tlačítko “+”, pomocí kterého lze začít obrázky tagovat. Tzn: obrázky se tagují přímo na webu klienta.

      7. V dashboardu / Websites settings lze pro všechny vistagy plošně nastavit:

        1. Barvu vistag ikony a CTA tlačítka.
        2. Výchozí text CTA tlačítka.
        3. Výchozí měnu produktu.
        4. Úroveň z-indexu. Vhodné např. při použití fixního záhlaví na webu apod.
        5. Vlastní CSS (na vistagy lze aplikovat dodatečné CSS dle potřeby).
        6. UTM parametry (plošně doplňují url cesty odkazů).
        7. Propojení s Google Analytics účtem.
        8. Výjimky nezapisovat statistiky pro dané IP adresy.
  3. Užívání na straně webu klienta

    1. Systém na základě autentizační cookie automaticky rozpozná přihlášeného uživatele, tzv. admin. Admin může tagovat a vidět základní statistická data, přitom statistiky nevytváří. Běžní návštěvníci jsou v režimu pouze pro čtení a naopak statistiky vytváří.

    2. Autentizační cookie má platnost 30 dní, popř. méně (podle nastavení prohlížeče).

    3. Pokud cookie vyprší, stačí ji obnovit prostým přihlášením do dashboardu na https://vistag.com

    4. Cookie může být vystavena i pro více počítačů / uživatelů.

    5. Stejný script může být použit na více doménách klienta (pokud to dovoluje balíček služeb). Domény jsou pak v dashboardu automaticky odděleny.

    6. Proces identifikace obrázků a aplikace vistagů.

      1. Po načtení scriptu aplikace projde všechny elementy <img /> (zároveň sleduje změny a nové výskyty elementů, tj. podporuje dynamicky načítaný obsah, lazy load apod.)
      2. Obrázky jsou rozlišovány na základě src atributu (a id účtu). Opakovaně použitý obrázek se stejným src atributem bude i na různých doménách (v rámci stejného účtu) obsahovat stejné vistagy. Např. src na doméně A bude src='X/img.jpg', na doméně B bude opět src='X/img.jpg', přičemž X může být A, B, nebo C.
      3. Atribut src je porovnáván s databází a v případě shody jsou vráceny a vykresleny vistagy.
      4. Parametry v src adrese jsou ignorovány. Adresa img.jpg?parametr=x je totožná s img.jpg. Stejně tak není rozlišována http://... a https://... resp. www.domain.com/img.jpg a domain.com/img.jpg verze.
      5. Aplikace je maximálně optimalizována na výkon javascriptu a počet requestů.
    7. Vhodnými obrázky pro tagování se rozumí

      1. Elementy <img />.
      2. Obrázky o velikosti větší než 200x150.
    8. Nevhodné obrázky pro tagování

      1. Obrázky obsahující atribut class = “vistag-off” jsou scriptem ignorovány.
      2. Obrázky vložené v elementech pomocí CSS background-image.
      3. Obrázky na nichž jsou aplikovány animace (carousel, zoomy, hover eventy apod.).
      4. Obrázky, které mění poměr stran.
    9. Fotogalerie (lightbox) jsou podporovány, nicméně je nutné správně nastavit z-index úroveň pro spodní vrstvu (web) a horní vrstvu (lightbox). Obě vrstvy je možné nastavit pomocí CSS dědičnosti v dashboardu / Websites settings např:

      .content .vistag-container {z-index: 100 !important;}
      .lightbox .vistag-container {z-index: 2147482000 !important;}
      .vistag-container-lightbox {z-index: 2147482000 !important;} /*alternativně*/
      
    10. Aplikace Vistag podporuje responzivní načítání obrázků za předpokladu že:

      1. U elementu <img /> je nastaven výchozí atribut src (klíčový pro script) a pro responzivní verze pak atribut srcset (je směrodatný pouze pro prohlížeč).
      2. Pokud je elementu měněn atribut src pomocí javascriptu (jQuery apod), je nová hodnota src považována za nový (jiný) obrázek. Výjimkou jsou obrázky, u kterých se src liší pouze v číselných reprezentacích rozlišení. Např. následující url jsou považovány za stejný obrázek:
        http://domena.com/images/1024/768/image.jpg
        http://domena.com/images/640/480/image.jpg
        
        nebo
        http://domena.com/images/image_1024x768.jpg
        http://domena.com/images/image_640x480.jpg
        
      3. Script dynamicky reaguje na změnu velikosti elementu (změna velikosti okna, změna in-line stylu / classy).
  4. Google tag manager

    1. Aplikace Vistag podporuje vložení scriptu přes GTM. Stačí založit “nový tag”, jako “vlastní HTML” vložit vistag script, “Triggering pro všechny stránky” a uložit.
  5. WordPress

    1. Aplikace Vistag podporuje vložení scriptu v systému WordPress.
    2. Script lze vložit do šablony jako klasické HTML, nebo
    3. Lze také použít plugin vistag https://wordpress.org/plugins/vistag/
    4. V prostředí Wordpress je postup následující:
      1. Otevřete záložku Plugins > Add New
      2. Vyhledejte Vistag
      3. Nainstalujte
      4. Aktivujte Vistag plugin skrze záložku Plugins
      5. Otevřete záložku Vistag z levého panelu
      6. Klikněte na tlačítko Log in. Následně budete přesměrováni na vistag.com, kde je nutné se zaregistrovat (Sign up), nebo přihlásit (Log in). Dojde k založení autentizační cookie a dojde k přesměrování zpět na Wordpress. Od této chvíle je možné na webu tagovat.
  6. Proces tagování

    1. Průvodce se aktivuje pomocí tlačítka “+” umístěného u vhodných obrázků na pravé straně. Podmínkou je platná autentizační cookie.

    2. Vyberte pozici, kde chcete vistag umístit. Umístění lze následně v editačním módu upravit.

    3. Vyberte jeden ze tří typů vistagu

      1. Produkt - Odkaz s obrázkem, titulkem, výrobcem a cenou. Tlačítko CTA může obsahovat animovaný text.
      2. Link - Odkaz s obrázkem, titulkem a textem. Tlačítko CTA může obsahovat animovaný text.
      3. Text - textové pole o 200 znacích.
    4. V případě typů produkt a link je vložený odkaz analyzován Vistagbotem, který z cílové url načte vhodné obrázky a titulek. V případě, že cílové url obsahuje také vhodné metatagy, jsou načteny i další paramtery. Pro nejvyšší automatizaci je vhodné, aby cílový e-shop obsahoval následující tagy v detailu každého produktu (cílové url):

      <meta property=“vistag:type” content=“product” />
      <meta property=“vistag:image” content=“http://example.com/images/sample.jpg” />
      <meta property=“vistag:title” content=“Big pocket” />
      <meta property=“vistag:price” content=“99.50” />
      <meta property=“vistag:currency” content=“EUR” />
      <meta property=“vistag:manufacturer” content=“Sony” />
      <meta property=“vistag:url” content=“http://example.com/productpage/” />
      
      1. Meta tagy jsou načteny v momentě vytváření vistagu (krok vložení cílové url).
      2. Jednou za hodinu (nebo déle) jsou všechny produktové vistagy zařazeny do fronty. Vistag robot následně kontroluje cílové url “každého” produktu na výskyt meta tagů. Pokud na cílové url meta tagy nenajde, odstraní z fronty všechny produkty se stejnou doménou (předpokládáme, že je e-shop nepoužívá a je zbytečné je kontrolovat všechny jednotlivě). V případě, že je nalezen meta tag vistag:price, dojde k aktualizaci ceny všech vistagů s danou produktovou URL.
      3. Robot je označen user agentem: Mozilla/5.0 (compatible; Vistagbot/1.0; +http://www.vistag.com/)
      4. Metatag vistag:price je typu float. Všechny ostatní jsou typ string.
      5. Metatag vistag:currency musí obsahovat kód měny dle ISO 4217. V případě, že není uveden, použije se výchozí měna z dashboardu / Websites settings.
      6. Všechny metatagy jsou nepovinné.
  7. Statistiky - aplikace sbírá následující data:

    1. Stránka - počet zobrazení (refreshů / pageview) každé webové stránky náležící dané doméně. Na předmětné stránce musí být alespoň jeden vistag.

    2. Médium (obrázek) - sbírají se statistiky každého obrázku na jedné stránce, pokud alespoň jeden z těchto obrázků obsahuje vistag.

      1. Počet zobrazení obrázku. Obrázek musí být po dobu alespoň 500ms zobrazen v okně prohlížeče alespoň ze 75% své plochy. V rámci jednoho refreshe je zobrazení obrázku počítáno pouze jednou.
      2. Čas ztrávený na obrázku. Součet všech časů po které vyhovuje předchozí bod zobrazení obrázku. Časy při opakovaném zobrazení (scrolování) se sčítají.
    3. Vistag

      1. Počet otevření detailu vistagu (mouse over na vistag, i opakovaně).
      2. Počet prokliků skrze CTA tlačítko vistagu typu produkt a link.
      3. Čas ztrávený na otevřeném vistagu (návštěvník si prohlíží detail vistagu).
    4. K cílovému url vistagu (proklik) lze automaticky přidávat UTM parametry, které nastavíte v dashboardu / Websites settings. Paramtery jsou globální pro každou doménu.

    5. V dashboardu / Websites settings lze nastavit Google Analytics UA, tzn. propojit GA účet klienta. Vistag na něj pak odesílá eventy:

      1. Show - zobrazení vistagu (součástí je parametr cílové url).
      2. Click - proklik vistagu (součástí je parametr cílové url).
    6. V dashboardu / Websites settings lze nastavit seznam IP adres, které jsou pro všechny statistické události ignorovány.

  8. Limity služby

    1. Systém nabízí tři balíčky služeb
      1. Balíček Zdarma (základní neplacený balíček bez závazků).
      2. Balíček Premium (první měsíc po registraci běží tento balíček zdarma v rámci trial módu).
      3. Balíček Enterprise (na objednávku lze sestavit individuální balíček).
    2. V dashboardu / Subscribe lze pro daný účet nastavit požadovaný balíček služeb. Platba probíhá kartou na měsíční nebo roční bázi. Předplatné lze kdykoliv zrušit. Po přijetí platby je automaticky vystavena elektronická faktura, která je zasílána na registrační e-mail správce účtu. Systém respektuje plátce DPH v EU.
    3. Limity
      1. Počet stránek kde lze script nasadit. Např. domena.com a subdomena.domena.com jsou dvě stránky (verze s/bez www není rozlišována). Na každé další stránce nad limit balíčku bude script neaktivní. Pořadí stránek lze v dashboardu / Websites settings přizpůsobit.
      2. Počet uživatelů účtu, kteří se mohou do administrace přihlašovat na vlastní údaje.
      3. Počet zobrazení je počet zavolání scriptu z klientského webu = 1 návštěva = 1 refresh celé stránky (nezávisle na počtu obrázků na stránce). Při překročení limitu, bude na obrázcích obsahujících vistag zobrazen vodoznak "Vistag".
      4. Mezi další služby patří možnost upravit vlastní barvu vistagu, vypnout podpis "Vistag" v otevřeném vistagu, přístup k UTM a GA nastavení viz pricing.

 

Lookbook dokumentace

  1. Požadavky

    1. Na doméně je nutné mít vložený platný webscript.
    2. V místech webové stránky, kde se má lookbook generovat je nutné vložit HTML kód
      <div class="vistag-lookbook"></div>
      
    3. Lze použít i jiné elementy se stejnou třídou, nicméně element může být pouze jeden.
  2. Funkce Lookbook je dostupná pouze v Enterprise placených balíčcích.

  3. Funkcionalita

    1. Pokud script detekuje element lookbooku, automaticky do něj generuje sadu obrázků uložených v rámci daného účtu (scriptu). Jsou generovány pouze obrázky, které obsahují alespoň jeden vistag, nebo obrázky přidané v administraci. Pořadí je dle data vložení obrázku do systému sestupně.
    2. Obrázky jsou řazeny do jednoho a více sloupců dle rozlišení návštěvníka.
    3. V případě, že návštěvník nascrolluje na konec stránky, je ze serveru načtena další sada obrázků. Počet sad má bezpečnostní limit.
    4. Správa lookbooku (přidávání / odebírání / nastavení) je k dispozici v dashboardu (v přípravě).