Bílá

Pro samotnou editaci videa můžete použít hned několik nástrojů, které mohou být už dopředu nainstalované ve vašem počítači. Nezáleží tak na tom, jestli používáte MAC a nebo klasické PC. Pokud už s některým software umíte pracovat, tak určitě zvolte právě ten.
Pro ty ostatní případy doporučuji využít ty, které jsou k dispozici online. Proč? Nemusíte je instalovat, je snazší je najít a hlavně základní úkony je z pravidla možné provádět zdarma.
<h2>Konvertor online</h2>
Jako první bych vzal v potaz online konvertory, které z pravidla vyřeší jak kompresi, tak velikost videa. Jako vyzkoušený doporučujeme <a href="https://cloudconvert.com/mp4-converter" target="_blank" rel="noopener">cloudconverter</a>, který umožňuje jak převody mezi formáty, tak změny velikostí a další úpravy. Vše zabere opravdu malou chvíli a získáte přesně to, co potřebujete.
<iframe width="560" height="315" style="display: table; margin-left: auto; margin-right: auto;" src="https://www.youtube.com/embed/-Upf0SYmUzU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"></iframe>
<h2>Střih videa</h2>
Pro samotný střih videa potom můžete použít, námi již dříve zmiňovanou Canvu. Pro potřeby vytvoření videa, například pro vložení na pozadí webu, bude pro vás naprosto dostačující.
Samotné video stačí naimportovat do knihovny, následně vložit na pracovní plochu a následně začít stříhat. Pokud nevíte jak, stačí si video kopírovat a ořezávat jednotlivé záběry.
<iframe width="560" height="315" style="display: table; margin-left: auto; margin-right: auto;" src="https://www.youtube.com/embed/LYsq839Tndw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"></iframe>
Výstupem by mělo být video ve formátu .mp4, které nebude delší než 20-30s. Datová velikost hraje samozřejmě zásadní roli a tady bych doporučil šetřit co to půjde. Obecně bych doporučil nepřesahovat 10MB, ale 15MB video se dá skousnout.
<h2>Vložení videa na pozadí</h2>
V rámci administrace existuje blok, který vložení videa na pozadí umožňuje. Vše, co musíte udělat, je nahrání souboru do admistrace v rámci bloku Hlavička s videem.

<img src="/uploads/upload_video_f0d4382843.png" alt="Výměna videa na pozadí bloku" width="600" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
A to je vše, co je potřeba udělat pro to, aby jste v záhlavý webu měli pěkné videa na pozadí.

Úprava videa pro web

V rámci nastavení analityky pro váš web je vhodné (doporučené) si nastavit několik základních událostí pro další měření návštěv a některé z nich si nastavit i jako konverzi. <a href="/blog/mereni-navstevnosti-a-implementace-google-tag-manageru-gtm">Jak nastavit a nakonfigurovat samotné GA4 je popsáno už v samostatném článku</a>.
<h2>Vlastní události v GA4/GTM</h2>
Pokud chcete měřit více, a nebo sofistikovaněji události, které se dějí na vašem webu, tak se bez vlastních událostí úplně dobře neobejdete. Aby jste mohli trekovat události, potřebujete prvně nastavit pravidla, které je budou spouštět (tzv. triggery). Ty jsou dvojího typu, buď jsou samostatné a nebo skupinové (více pravidel zároveň). Jako první nastavíte vše potřebné v Google Tag Manageru a následně propojíte do GA4.
<h3>Jednoduché pravidalo pro spuštění události</h3>
Jako jednoduché pravidlo považujeme spuštění při splnění jedné podmínky. Takové pravidlo může být třeba All pages (tedy spuštění na všech stránkách) a nebo např. Kliknutí.
<img src="/uploads/all_pages_f79566f17a.png" alt="Nastavení spuštění události při načtení jakékoliv stránky na webu" width="400" style="display: block; margin-left: auto; margin-right: auto;">
Při nastavování jednoduchých pravidel máme na možnost používat pouze operátoru NEBO a tedy daná událost se spustí při splnění alespoň jednoho z pravidel spuštění.
<img src="/uploads/podminy_nebo_ab931564d8.png" alt="Nastavení spuštění události s více pravidli" width="400" style="display: block; margin-left: auto; margin-right: auto;">
Tím můžete ve většině případů nastavit pravidla pro spuštění vaší události. Pokud potřebujete pro spuštění události nastavit sofistikovanější pravidlo (pomocí operátoru AND - "a zároveň") a splnit více kritérií, tak musíte použít skupinu pravidel, o které se dozvíte více níže.
<h3>Skupina pravidel spuštění události (group trigger)</h3>
Použití skupiny pravidel pro spouštění událostí se hodí zejména v případě, kdy chcete spustit událost a zároveň vynutit současnou platnost více pravidel. Jako příklad může být kombinace času strávené na stránce a doscrollování do určitého místa (např. níže než je 80% výšky stránky v kombinaci s časem na stránce pro 20s).
<img src="/uploads/group_trigger_1593338507.png" alt="Group trigger" width="800" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
Kombinací může být i více a záleží tak čistě na vás, co budete chtít na webu měřit. Tedy můžete specifikovat jak konkrétní stránky, čas, míru scrollu uživatele a další. Vytváření naleznete v sekci Pravidla a následně výběr Skupina pravidel.
<img src="/uploads/pravidla_dbe407a295.png" alt="Skupina pravidel" width="400" style="display: block; margin-left: auto; margin-right: auto;">
<h3>Nastavení spuštění události</h3>
Pokud se příliš nepohybujete v problematice webů, tak vám bude pravděpodobně dělat menší problém napasovat si na sebe správně událost a jejich spuštění (zejména pravidla spouštění podle tříd nebo ID, které naleznete v kódu webové stránky).
Nejlepším způsobem je využití funkce prozkoumat, kterou obsahuje váš webový prohlížeč a díky které dovedete určit, jaký prvek (a jeho třída apod...) je nezbytná pro spuštění (identifikaci) a následného trekování vaší událostí.
<img src="/uploads/Snimek_obrazovky_2023_07_18_v_19_56_31_909d06842a.png" alt="Funkce &quot;Prozkomat&quot; ve webovém prohlížeči" width="600" style="display: block; margin-left: auto; margin-right: auto;">
Nabídku lze vyvolat buď pravým tlačítkem myši a zvolením Prozkoumat, a nebo klávesovou zkratkou cmd+U na Mac zařízeních a nebo ctrl+U na zařízeních s Windows.
Následně vybýráte konkrétní prvky, které se po najetí zvýrazní a zobrazí třídu. Ikona se liší podle webového prohlížeče ale z pravidla se nachází v levém horním rohu:
<img src="/uploads/inspect_165cc5c2f9.png" alt="Výběr konkrétního prvku" style="display: block; margin-left: auto; margin-right: auto;">
Podle čeho můžeme (a nejčastěji se tak i děje) párovat části webu na spouštěcí pravidla:
<ul>
<li>Třídu (CSS class) daného prvku</li>
<li>ID (CSS ID) prvku nebo části webu (zadává se vč. mřížky "#")</li>
<li>Text (Click text) daného prvku</li>
<li>Odeslání formuláře (Form submit)</li>
</ul>
Možností je daleko více, ale tyto 4 patří k těm nejčastějším, podle kterých dokážeme navázat události na jejich spouštěcí části na webu. Teď trošku prakticky:
<ol>
<li>Vytvoření pravidel pro spouštění událostí</li>
<li>Nastavení událostí</li>
<li>Propojení pravidel s událostmi</li>
</ol>
Detailní postup naleznete na komentovaném obrázku:
<img src="/uploads/GA_4_postup_92b0e932fa.jpg" alt="Nastavení vlastních událostí v GA4" width="800" style="display: block; margin-left: auto; margin-right: auto;">
Když máte vše nastavené v Google Tag Manageru, tak je potřeba se ještě přesunout do GA4 a jednotlivé události si tam odchytat. Přejdete tedy do nastavení, kde vyberete Události.
<img src="/uploads/GA_4_udalosti_c1f8d60860.png" alt="Nastavení vlastní události v GA4" width="600" style="display: block; margin-left: auto; margin-right: auto;">
Při vytváření vlastní události ve většině případů stačí vyplnit její název (ten který uvidíte následně v GA4) a napárovat jí na název události, kterou si pošlete z GTM (viz předchozí kroky). Po uložení máte hotovo a měříte.
<img src="/uploads/GA_4_udalost_ded7f3b84d.png" alt="Nastavení vlastní události - GA4" width="600" style="display: block; margin-left: auto; margin-right: auto;">
<h2>Nastavení konverzí</h2>
Když máme nastavené jednotlivé události, které mají pro analytiku webu nějaký význam, tak můžeme ty podstatné z nich (třeba ty, které vedou k nákupu, objednání apod... označit jako konverzní). Takové se nám pak zobrazují i v přehledech (součtu).
<img src="/uploads/Snimek_obrazovky_2023_07_18_v_20_07_48_3350bc5820.png" alt="Zobrazení konverzí v přehledu GA4" style="display: block; margin-left: auto; margin-right: auto;" width="400">
Pro inspiraci uvádím několik možností, které mohou sloužit pro měření konverzí:
<ul>
<li>Odeslání poptávkového formuláře</li>
<li>Odeslání náborového formuláře</li>
<li>Kliknutí na telefonní kontakt</li>
<li>Kliknutí na e-mail</li>
<li>a další...</li>
</ul>
<img src="/uploads/konverze_fb0557c974.png" alt="Označení, které události budou konverzí" width="500" style="display: block; margin-left: auto; margin-right: auto;">
<h2>Nastavení mikrokonverzí</h2>
Jak jsem zmínil v úvodu, tak lze nastavit různé událost (třeba dobu setrvání na stránce apod...) a tím si určit i nějaké dílčí mikrokonverze. To lze následně využít pro označení publik v Google Ads apod...
Pro inspiraci uvádím několik možností, které mohou sloužit pro měření mikrokonverzí:
<ul>
<li>Setrvání nějaké doby na stránce (obvykle doby potřebné pro její přečtení)</li>
<li>Navštívení kontaktní stránky</li>
<li>Doscrollování do určitého místa na stránce</li>
<li>Stažení souboru (nař. pdf, e-booku,...)</li>
<li>Přihlášení se k odběru newsletteru</li>
<li>...</li>
</ul>
Jak nastavit spouštění pravidel je popsáno již výše.
<h2>Délka uchování údajů</h2>
V rámci nastavení konverzí a mikrokonverzí na webu, bychom doporučili také nastavit a zejména prodloužit délku pro uchování údajů událostí a to na maximální dobu - 14 měsíců.
<img src="/uploads/uchovavani_dat_fde5126efb.png" alt="Nastavení doby uchovávání dat - GA4" width="600" style="display: block; margin-left: auto; margin-right: auto;">
Díky tomu budou data o uživatelých a data ze serverů uchovávána po delší dobu.

Google Analytics 4 - nastavte si na webu konverze a mikrokonverze

Při stavbě jakéhokoliv webu je třeba počítat nejen s nákladem na vývoj řešení, ale také na stavbu obsahu webu, který je zpravidla závislý na zákazníkovi, který si web plní svým obsahem a také na obsahu, který do webu bude vkládat (zejména na to, kolik toho obsahu celkem je).
<h2>Co to je ten Sitebuilding?</h2>
Sitebuilding je vlastně proces, kdy si skládáte jednotlivé stránky a podstránky tak, jak si vyžaduje daná podstránka (její obsah - texty, obrázky, video...) a jak vyžaduje celková struktura webu.
V rámci CMS Strapi se obsah každé stránky skládá z bloků, které reprezentují jednotlivé pruhy webu a lze je používat v libovolném množství a pořadí na jakékoliv stránce daného webu.
<img src="/uploads/sitebuilding_e1c6468317.png" alt="Sitebuilding webu skrze CMS Strapi" style="display: block; margin-left: auto; margin-right: auto;" width="800" height="auto">
Sitebuilding je v tomto případě skládání bloků dané stránky za sebe a jejich následné plnění textovým a dalším obsahem. Tím dochází k vytváření celých stránek a podstránek a výsledkem je kompletní web dané firmy, projektu, obchodu apod...
<h2>Sitebuilding v CMS Strapi</h2>
V rámci Strapi, jak už bylo zmíněno výše, se Sitebuilding vytváří z poskládání dostupných bloků za sebe. V rámci naší administrace můžete tedy využít kterýkoliv z více než 34 bloků a dosáhnout tak ideální struktury dané podstránky (podle obsahu, který na dané stránce potřebujete a nebo chcete prezentovat). Víc informací o tom <a href="/blog/bloky-a-jak-funguji">jak fungují bloky</a> a jak je skládat za sebe se dozvíte v samostatném článku.
Mimo klasické bloky můžete ale využít i znovupoužitelné bloky a tím si ulehčit zejména práci s následnou správou obsahu, jeho aktualizací a úpravami. Více informací o <a href="/blog/znovupouzitelne-bloky">znovupoužitelných blocích</a> si můžete přečít taktéž v samostatném článku.

Co je to Sitebuilding webu?

V rámci webu je několk možnosí, jak s nimi pracovat a na kterých pozicích se zobrazují. Ty nejčastější jsou součástí záhlaví webu, tedy obrázek na pozadí pod navigačním menu. Dalším typem jsou obrázky, které jsou součástí textu a ty poslední potom na pozadí jednotlivých bloků.
<h2>Pozice a nastavení obrázků</h2>
V rámci webu můžete nastavovat pozici obrázku na pozadí, což je dobrá možnost, jak pracovat s celkovým designem webu a upravit si ho dle vlastních preferencí.
Každý blok má možnost nastavení jak barvy, tak obrázku na jeho pozadí. V rámci obrázku je potom možné i nastavit jeho pozicování, kde jsou možnost:
<ul>
<li>Na střed/střed</li>
<li>Na horní/dolní střed</li>
<li>Vlevo a vpravo ve všech pozicích (nahoře/střed/dole)</li>
</ul>
Obrázek ve všech případech vyplní celý prostor, proto je dobré pracovat v případě, kdy chcete obrázek pozicovat podle sebe, pracovat s jeho vleikostí (vytvořit ho o něco větší) a tím docílit potřebného efektu a unikátního designu vašeho webu.
<h2>Pořádek v souborech</h2>
V rámci ukládání obrázků, ale platí to i pro ostatní soubory, je dobré si dlouhodobě udržet pořádek a členit si soubory do jednotlivých složek.
<img src="/uploads/soubory_slozky_bbf963ebbf.png" alt="Vytváření složek a členění souborů v knihovně médií" width="600" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
Doporučujeme si tedy vytvořit složky odpovídající hlavním částem vašeho webu. Do těchto složek potom ukládat jednotlivé soubory, které se vyskytují na webu.
<h2>Možnosti nastavení obrázků v rámci media library</h2>
Administrace sama o sobě umožňuje nějaké základní úkony při práci s obrázky. Obrázek je možné si stáhnout do počítače, zkopírovat si jeho adresu a nebo ho oříznout.
<img src="/uploads/Snimek_obrazovky_2023_03_02_v_21_52_08_57eb3614f4.png" alt="Možnosti práce s obrázky" width="600" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
V rámci nastavení obrázku lze nastavit jeho název, případně alternativní popisek (ALT atribut), který určitě doporučujeme mít vhodně vyplněný (= popis obsahu obrázku). Alternativní obrázek se zobrazuje uživatelům v případě, kdy nedojde ke korektnímu načtení obrázku, případně v některých částech webu i jako doprovodný text zobrazený přímo pod obrázkem.

Práce a možnosti pro práci s obrázky na webu

<h2>KDO JSME</h2>
Jsme digitální agentura Beneficio. Děláme online marketing, tvoříme weby, programujeme na míru. Jsme na trhu od roku 2014, máme za sebou 130+ projektů, kvalitní zázemí a získané zajímavé reference.
<h2>CO BUDE NÁPLNÍ TVÉ PRÁCE? </h2>
Hledáme specialistu, který se postará o PPC našich klientů. PPC pro tebe nebude jen zíraní do čísel. Hledáme kolegu/ni, který bude mluvit do celkových marketingových výsledků naší práce se specializací na PPC. Hledáme kolegu/ni, kterého názor bude mít váhu a dopad na celkové marketingové a obchodní výsledky našich klientů. 
<h2>CO POŽADUJEME? </h2>
<ul>
<li aria-level="1">DRIVE </li>
<li aria-level="1">ZNALOST PROSTŘEDÍ GOOGLE ADWORDS, FACEBOOK BUSINESS MANAŽER A POVĚDOMÍ O EMAILINGU A VYHLEDÁVAČÍCH</li>
<li aria-level="1">CHUŤ SE UČIT A ZEFEKTIVŇOVAT PROCESY</li>
<li aria-level="1">ZKUŠENOSTI V MARKETINGU OBECNĚ</li>
<li aria-level="1">VIZUÁLNÍ CIT </li>
<li aria-level="1">CIT PRO JAZYK A GRAMATIKU</li>
<li aria-level="1">ANGLIČTINU - NA ÚROVNI ČTENÍ A PŘÍLEŽITOSTNÉ EMAILOVÉ AGENDY</li>
</ul>
<h2>CO NABÍZÍME</h2>
<ul>
<li aria-level="1">SPOLUPRÁCI NA 160 HOD/MĚS NA IČO PŘÍPADNĚ MINIMÁLNĚ 90 HODIN, POKUD BY SE VÁM HODIL MENŠÍ ÚVAZEK</li>
<li aria-level="1">KANCELÁŘE V SAMÉM CENTRU PRAHY - MYSLÍKOVA ULICE</li>
<li aria-level="1">KVALITNÍ ZÁZEMÍ ZABĚHLÉ AGENTURY</li>
<li aria-level="1">SYMPATICKÝ KOLEKTIV A MOŽNOST ČÁSTEČNÉHO HOMEOFFICE</li>
<li aria-level="1">ODPOVÍDAJÍCÍ PLATOVÉ PODMÍNKY A DALŠÍ BENEFITY PO ZABĚHNUTÍ</li>
<li aria-level="1">PŘÍSPĚVKY NA NETWORKINGOVÉ AKCE, ŠKOLENÍ A DALŠÍ ZLEPŠOVÁKY KARIÉRY</li>
<li>VYVÁŽENOU FIREMNÍ KULTURU (MLADÝ KOLEKTIV, MODERNÍ ŘÍZENÍ ALE TRADIČNÍ PŘÍSTUP K BUSINESSU A PRÁCI)</li>
</ul>
Ale stejně... Je to o sympatiích a dalších detailech, že? A proto se rádi poznáme osobně. Pokud jsme vás také zaujali, budeme rádi za váš životopis, který nám prosím zasílejte na: <a href="mailto:prace@beneficio.cz">prace@beneficio.cz</a>
Budeme se těšit.  Místo výkonu práce: Myslíkova 12, Praha 2

Jsi PPC/online specialista a přemýšlíš o změně?  Nebo jsi se rozhodl/a pro dráhu online specialisty a chceš se realizovat na nové pozici?

LW_220205_BENEFICIO_PORTRAIT_LIFESTYLE_PRAGUE_CZ_LQ_0023.jpg

Komplexní správa IT

Brno

PPC ONLINE SPECIALISTA

Blog

Přečtěte si i další články, nebo znalostní bázi se základními informacemi na správu a údržbu vašeho webu.

Uprostřed nahoře ↑

Doporučujeme k přečtení

Blog - Detail

BENEFICIO MEDIA, S.R.O.

Hlavní nabídka

Patička - Hlavní nabídka

Další informace

Patička - Služby

Pojďte s námi opět chvíli tvořit. Do našich služeb vkládáme důraz na kreativní řešení, rozumné termíny i ceny.