Dobrý den, rád bych začal tento článek malou poznámkou.

Ti, kteří mají rádi nejen vývoj, ale i propagaci webových stránek, vědí, že požadavky na stránky každým rokem rostou, vyhledávače se snaží vyřadit nevyžádané stránky a udržovat je co nejrelevantnější. Při prohlížení posledních konferencí o propagaci komerčních stránek jsem si tedy všiml jedné skutečnosti, která je ve všech případech podobná – jde o design kontaktní stránky. Pryč jsou doby, kdy tato stránka obsahovala jen pár telefonních čísel a formulář zpětná vazba. Nyní musíte uvést kontaktní údaje co nejinformativnější. V tomto případě se bez dynamické mapy umístění vaší kanceláře prostě neobejdete. Stala se nedílnou součástí jakékoli kontaktní stránky komerčního webu.

Yandex poskytl vývojářům v tomto směru jejich vlastní řešení – konkrétně „Yandex Map Constructor“, který umožňuje webmasterům snadno přidat jakoukoli mapu na jejich stránky.

Pojďme tedy přímo k akcím.

1.) Nejprve přejděte do samotného konstruktoru map - http://api.yandex.ru/maps/tools/constructor/.

Zobrazí se vám mapa a pole, kam můžete zadat požadovanou adresu.

Mapu umístění můžete vytvořit i bez autorizace v Yandexu.

2.) Zadejte adresu, kterou potřebujete, po které se vám zobrazí nápověda s celým názvem ulice, města a čísla domu.

3.) Po výběru adresy můžete ke štítku zadat popis a také zvolit jeho barvu. Po nastavení klikněte na tlačítko "OK". A jdeme na stránku dolů.

5.) Zkopírujte poskytnutý kód a vložte jej na správné místo na webu.

Pár poznámek

— tato metoda vložení mapy Yandex do webu je vhodné pro jakýkoli CMS: Joomla, Opencart, WordPress a další.

- často, vizuální editor, například v joomle, ořízne kód. Je tedy žádoucí pracovat s kontaktní stránkou bez editoru. Nebo vložte mapu na web po všech vizuálních úpravách.

Zkopírujte vygenerovaný kód mapy do textový soubor a při úpravě stránky kontaktu, pokud je kód zkreslený, můžete jej kdykoli obnovit.

To je pro dnešek vše, v následujících článcích budu dále zveřejňovat cheat sheety technické práce s weby.

Pokud chcete na svůj web přidat mapu Google nebo Yandex s vlastními štítky, řekneme vám, jak na to.

Myslím, že budu mít pravdu, když řeknu, že vývoj moderních webových technologií je z velké části způsoben rozšířením mobilní platformy(především Android a iOS). Počínaje globálním, například úplným přechodem většiny webových zdrojů na adaptivní rozložení a končí maličkostmi, jako jsou telefonní čísla, na která lze kliknout a která můžete vytočit jedním dotykem.

Ale i maličkosti hrají, někdy, velmi velká důležitost. Vezměme si situaci. Existují například dvě stránky, které nabízejí koupit něco levného. Skutečná zastoupení obou lokalit se nacházejí ve stejném městě (řekněme v Moskvě). Adresy zastoupení jsou uvedeny tam i tam. Ale na prvním webu je adresa jednoduše napsána někde ve sklepě a na druhém je vizuálně navržena jako mapa, na kterou uživatel klikne a hned získá souřadnice... Otázka pro fajnšmekry: „Kde bude budou tržby vyšší“? :)

Moderní online mapy ideálně řeší jakékoli úkoly, ve kterých potřebujete uživateli ukázat konkrétní místa a podat o nich informace. stručný odkaz. Pokud jste tedy majitelem webu, který představuje skutečný byznys, pak byste si měli rozhodně dát pozor na technologii, o které si povíme v dnešním článku.

Způsoby vkládání karet

Technicky vložení mapy na web spočívá v přidání rámečku na stránku, který zobrazuje požadovaný kus terénu přímo z mapové služby (obvykle Google nebo Yandex). To znamená, že do webové stránky jednoduše uděláme jakousi „díru“ s kartou pod ní (mimochodem stejným způsobem se vkládá například video z YouTube).

Situace s přidáváním vlastních štítků vypadá mnohem nepřehledněji. Takže například dřívější Google umožňoval vyrábět značky ve formě červených majáků a opatřovat je popisem přímo na hlavní službě. Poté byla tato možnost realizována pomocí JavaScript API. Od loňského roku se však API stalo placeným a jediným oficiálním způsobem, jak přidat mapu Google s vašimi poznámkami na web, se stala služba „ Moje karty ".

Yandex je v tomto ohledu zpočátku mnohem pohodlnější. Poskytuje nejen plnohodnotné API, ale také hotové webové rozhraní ("Map Constructor") pro vizuální práci s ním bez znalosti JavaScriptu (ve skutečnosti obdoba "Moje mapy")!

Kromě Google a Yandex ve skutečnosti existuje řada dalších služeb, které vám umožňují umístit vaše značky do map. Budeme o nich také mluvit, ale méně podrobně. A nyní se zaměřme na to, co nám hlavní giganti kartografie umožňují.

Vaše značky na mapách Google

Mimochodem, taková mapa je vhodná pro získání souřadnic navigátorem, ale obyčejný člověk pravděpodobně nepochopí, kam jít, protože Správné místo nejsou vizuálně označeny. Chcete-li vytvořit dobré informativní štítky na mapách Google, musíte je mít účet Google a používat je oficiální služba "Moje karty ".

Tato služba umožňuje uživateli provádět následující akce:

• přidat štítky s popisy a fotografiemi;
• položit trasy se schopností měřit vzdálenost mezi jejími body;
• nakreslete libovolné čáry se schopností měřit vzdálenost a plochu jimi tvořených uzavřených postav.

Na úvodní stránka obsahuje seznam map, které jste vytvořili dříve (může být prázdný) a tlačítko "Vytvořit nová karta" . Začněme s tím pracovat. Po kliknutí se před vámi otevře známá Google mapa s trochu neobvyklým ovládáním. Zvažme je pečlivě:

V horní části pracovní plochy jsou panely nástrojů, které umožňují přidávat do mapy vlastní značky. Na levé straně je velký ovládací panel vrstev. Tento panel se podobá tomu v grafické editory. Na jednu vrstvu můžete umístit neomezený počet prvků, pokud však potřebujete některý z nich skrýt, stačí jej smazat. Pokud zpočátku přidáte každý prvek do vlastní vrstvy, pak k jeho skrytí bude stačit pouze vypnout jeho viditelnost.

Za pozornost stojí i malé tlačítko "Základní mapa" na postranním panelu. s jeho pomocí můžete změnit styl samotné mapy (já například preferuji styl "Satelitní").

Chcete-li nastavit značku, vyberte požadovanou oblast na mapě a měřítko, ve kterém budeme pracovat, poté aktivujeme nástroj "Přidat značku" a klikneme na bod, který má být označen. Objeví se malá značka a nad ní vyskakovací okno se dvěma poli pro zadávání textu: název značky a Stručný popis:

Po uložení zadaných primárních dat bude váš štítek přidán do aktuální aktivní vrstvy a budete mít několik nových možností pro jeho nastavení. Nejprve v postranním panelu nad samotným štítkem bude sekce "Individuální styl". Kliknutím na něj můžete vybrat podpis, který se zobrazí vedle značky. Jako podpis může sloužit název tagu nebo jeho popis zkrácený na jeden řádek.

Za druhé, nové nástroje se také objeví ve vyskakovacím okně nad přidanou značkou. Kromě úpravy popisu můžete změnit vzhled samotný marker výběrem jednoho z standardní ikony nebo dokonce nahráním jakékoli své fotografie (tlačítko "Více" - "Vlastní ikona"). Pomocí speciálního tlačítka můžete také nahrát své fotografie pro zobrazení na panelu popisu. A nakonec je možné vytvořit trasu mezi vámi přidaným bodem a jiným cílem pomocí předposledního tlačítka. V důsledku toho můžete získat něco takového:

Rád bych se trochu pozastavil nad otázkou optimalizace výsledného kódu:

Faktem je, že ve výchozím nastavení má rámeček, který vložíte s mapou, jasný dané rozměry. Dnes je důležité dělat všude tam, kde je to možné, adaptivní rozložení, které se automaticky přizpůsobí velikosti obrazovky. Podle standardů HTML nelze šířku a výšku u rámce zadat v procentech, takže je lepší tyto parametry z kódu úplně odstranit, nahradit je nějakou CSS třídou a rozměry nastavit pomocí CSS nebo inline stylů:

Možnost 1. Se třídou (správnější)

Google-map (šířka:100%; výška:480px;)

Možnost 2: Vložené styly

Takto můžete získat krásnou funkční a platně vloženou adaptivní mapu Google na webu:

Vlastní značky na mapách Yandex

Yandex, jak je uvedeno výše, měl zpočátku více možností pro úpravu map. Jednak stále existuje a vyvíjí se služba „Mapa lidí“, kde si každý může dělat vlastní poznámky na společnou mapu. Za druhé je tu plnohodnotné JavaScript API, které umožňuje webmasterům maximálně přizpůsobit vzhled mapy a popisků na ní. A za třetí, pro ty, kteří nejsou obeznámeni s JavaScriptem, existuje vizuální služba „Map Constructor“, která implementuje většinu funkcí API! Pojďme se na to podívat:

Stejně jako v „Mojich mapách“ je zde rozhraní rozděleno na postranní panel, který zobrazuje seznam vámi přidaných značek a nastavení mapy a také funkční klávesy v horní části, pomocí kterých můžete do mapy přidávat vlastní značky. Příležitosti jsou zde však menší. Můžeme přidat pouze standardní značky (navíc, pokud ve formě ikon, tak pouze bez podpisů), kreslit čáry (obdoba pokládání trasy) a polygony. Jedinou novinkou, kterou Google neměl, je možnost zobrazení dopravních zácp. To ale platí jen pro velká města.

Algoritmus akcí je zde stejný jako v "Moje karty". Najdeme část mapy, kterou potřebujeme, aktivujeme nástroj "značky" a kliknutím přidejte značku na správné místo. V zobrazeném vyskakovacím okně můžete nastavit barvu značky, její typ ("čárka" nebo "tečka") a také ji trochu ozdobit přidáním textu nebo vlastní ikony (v tomto případě však text podpisu nebude viditelný). Kromě podpisu, který bude viditelný napravo od štítku, můžete přidat krátký popis, který se zobrazí po kliknutí na značku.

Po přidání štítků je můžete propojit s podobností s trasou. Chcete-li to provést, aktivujte nástroj "čáry" a nakreslete referenční body budoucí trasy. Chcete-li jej dokončit v posledním bodě, klikněte znovu a vyberte "Dokončit". Kupodivu má tato funkce oproti trasám Google několik výhod. Za prvé, můžete položit čáry i tam, kde nejsou žádné silnice, což vám umožní přesněji položit cestu pro chodce, a za druhé, délka hotové čáry se zobrazí na postranním panelu, což je také velmi výhodné.

V podstatě to je vše. Chcete-li získat kód karty se svými značkami, klikněte na tlačítko "Uložit a pokračovat" (boční panel níže) a v okně, které se otevře, upravte velikost viditelné části mapy. Pro přizpůsobivost doporučuji volbu aktivovat "Roztáhnout do šířky", načež bude stačit stisknout tlačítko "Získat kód karty":

Na rozdíl od Google poskytuje Yandex mapu nikoli ve formě rámečku, ale ve formě skriptu, který je podobně vložen na správné místo na stránce vašeho webu. Pokud rozumíte JavaScriptu, pak mírným přepsáním skriptu můžete výrazně vylepšit vzhled mapy tím, že nahradíte ikony značek místa a přidáte obrázky do popisu (návod nebo ). Ale v zásadě vše vypadá docela slušně bez toho:

Další online mapy

Google a Yandex jsou jednoznačně favority v naší zemi. V zahraničí však existuje řada hodnotných služeb, které používají stejné mapy Google nebo své vlastní a umožňují vám aplikovat nejen vaše značky, ale také vytvářet plnohodnotné prezentace tras! Stručně popíšu některé z nich.

Open Street Map (OSM)

Karty OpenStreetMap spíše mapy oblasti. Nechybí detailní vykreslení krajiny a domů, ale přesto se jedná o jediné online mapy, které jsou kompletně vytvořeny skutečnými lidmi a které si můžete sami upravovat. Díky aktivitě uživatelů OSM mapy na některých místech planety zobrazují ještě přesnější informace než Google mapy (i když to zdaleka není všude)!

Co se týče možností, zde si můžeme nastavit popisky s popisem a kreslit trasy. Navíc, pokud máte GPS tracker, pak lze data trasy exportovat do mapy přímo z něj. Mapy OpenStreetMap mají také pokročilý režim úprav. V tomto režimu se jako základ zobrazují mapy Bing a můžete si na ně dělat libovolné poznámky, kreslit čáry a tvary, podobně jako „Moje mapy“ od Googlu. Všechny uložené úpravy přejdou na běžná karta, proto buďte opatrní při provádění jakýchkoli změn, abyste ostatní uživatele neuvedli v omyl záměrně nesprávnými informacemi!

ScribbleMaps

Pokud se nebojíte anglického rozhraní a chcete si pořídit mapu s popisky ve stylu raných Google map (s vyskakovacími okny s popisy, obrázky a dokonce i videem po kliknutí), pak se vám služba může líbit ScribbleMaps:

Tato služba vám umožňuje používat jako podklad mapy nejoblíbenějších zdrojů (včetně Google a OSM) a na ně již nastavit četné značky, tvary, trasy a dokonce i jen obrázky nebo textové štítky. Stručně řečeno, pokud potřebujete zmapovat co nejvíce vlastních informací, pak by vám v tom měly pomoci ScribbleMaps.

Je však třeba poznamenat, že tato služba má řadu negativních aspektů. Část funkčnosti je dostupná pouze na placené bázi pro tzv. VIP uživatele. Ale v zásadě pro vkládání štítků a obrázků nemusíte být žádný "VIP". A ještě více - můžete vytvořit mapu a získat kód pro její vložení na stránky i bez registrace! Tady je takový rozpor :)

AniMaps

Pokud najednou chcete svým návštěvníkům ukázat nejen místo na mapě, ale jasně ukázat cestu k němu, pak vám s tím může služba pomoci. AniMaps:

AniMaps vám umožňuje přidat do standardní karta Google směruje a zobrazuje určité obrázky nebo textová vysvětlení podél jeho trasy. Rychlost pohybu po dané trase si nastavujete sami pomocí časového posuvníku nad mapou. Výsledkem vaší práce bude automatická prezentace trasy se „zastávkami“ na vámi označených místech.

Můžete vytvářet trasy bez registrace, ale pouze registrovaní uživatelé mohou získat kód pro vložení na stránku.

závěry

Vložení mapy na stránky nebude těžké, pokud vše víte předem potřebné služby pro tohle. Přitom není nutné být programátor nebo obecně žádný IT specialista – vše probíhá ve vizuálním režimu! Na konci vždy dostanete hotový kód, které lze jednoduše vložit do textu na stránce vašeho webu bez instalace jakýchkoli specializovaných pluginů.

S alespoň základními znalostmi v oblasti webových technologií můžete kód přijaté mapy mírně vylepšit tím, že ji přizpůsobíte (jako v případě Google) nebo přidáte další prvky (jako v Yandexu). Pomocí mnoha zahraničních online kartografických služeb můžete překvapit své uživatele dokonce animací na mapách! Ale čím zajímavější vaše nabídka, tím více zákazníků přiláká ;)

P.S. Tento článek je dovoleno volně kopírovat a citovat za předpokladu, že je uveden otevřený aktivní odkaz na zdroj a je zachováno autorství Ruslana Tertyshného.

Poměrně často se při vytváření webu stává nutností vložit na něj mapu, která by označovala umístění vaší organizace. Ve skutečnosti je mapa na webu velmi pohodlná: především pro vaše uživatele. Budou moci okamžitě, aniž by opustili váš zdroj, vidět, jak vás mohou najít, co je poblíž a určit, jak daleko se vaše organizace nachází od jejich umístění. Ne každý ví, jak vložit mapu na web. A je to velmi, velmi snadné!
V tomto článku vám řeknu a ukážu, jak během několika minut můžete na stránky svého webu vložit mapu s požadovaným umístěním.

Jak vložit mapu na web

Pro vložení mapy na stránky tedy použijeme službu od Googlu.

1. První věc, kterou musíme udělat, je přejít na web Google Maps.

2. Nyní, abychom mohli provést všechny operace, které potřebujeme, je pro nás nejlepší přejít do „klasického rozhraní“.

Chcete-li to provést, klikněte na ikonu otazníku v pravém dolním rohu obrazovky.

Před vámi se otevře malý výsuvný panel nabídek, ve kterém je třeba vybrat „Classic interface“.

Poté se objeví další vyskakovací okno, kde budete požádáni, abyste sdělili, proč chcete používat klasické rozhraní. Jednu z položek můžete zaškrtnout, nebo ji nemůžete zaškrtnout, ale rovnou klikněte na modrý odkaz „Klasické rozhraní“ níže.

Poté přejdete do klasického rozhraní Google mapy, kde je vše, co potřebujeme k umístění mapy na stránku webu.

3. Nyní do pole pro zadání adresy zadejte požadovanou adresu. Nezapomeňte, že je třeba uvést zemi, město, ulici a dům, tedy celou adresu.

V důsledku toho obdržíte svou polohu na mapě označenou červenou značkou.

4. Nyní potřebujeme získat kód pro vložení na naši webovou stránku a také nastavit některá nastavení.

Abychom získali kód pro vložení, musíme kliknout na ikonu a získat odkaz nebo kód (nachází se vpravo od ikony tiskárny).

5. Zde nás zajímá HTML kód pro přidání na web (druhé pole).

Také v tomto kódu můžete vidět některé parametry, které lze změnit. Jedná se o rozměry mapy, tedy její výšku a šířku. Můžete také nastavit rámec pro mapu. Ve výchozím nastavení je hodnota rámce nula, ale můžete to změnit nastavením například jedničky.

Pokud potřebujete, změňte tyto parametry, i když to můžete udělat z kódu webové stránky. Pokud to není nutné, stačí zkopírovat celý kód.

6. Nyní zbývá pouze vložit zkopírovaný kód na místo vaší webové stránky, kde chcete vidět mapu.

Můžete vytvořit samostatný blok „div“ speciálně pro vaši mapu, který pak můžete stylizovat pomocí souboru šablony stylů.

Vložím svou kartu přímo sem. Podívejte se, jak to bude vypadat.

Výsledkem je, že uživatel uvidí vaši polohu označenou značkou. Bude moci posouvat mapu, přibližovat a oddalovat.

Nad značkou se také zobrazí pole s vaší adresou. Níže je odkaz pro zobrazení mapy ve větším měřítku.

Vše je tedy velmi jednoduché, funkční a pohodlné.

Použití na zdraví!

Budu rád, když pro vás bude tato lekce užitečná. Jako poděkování zanechte své komentáře a sdílejte článek pomocí tlačítek sociální sítě, které jsou umístěny níže.

Také se přihlaste k odběru aktualizací blogu, pokud ještě nejste přihlášeni. Slibuji vám spoustu užitečných materiálů.

Anna Kotelniková byla s vámi.

Ať se vám daří a zase se uvidíme.

Lekce materiály Activity

Jaké jsou cíle v systémech webové analýzy, jako je Yandex Metrika a Google Analytics a jak je nastavit?

Podívejme se na tento problém.

Pokud nemáte čas nebo se nechcete ponořit do všech funkcí nastavení takového cíle, můžete mi tuto práci svěřit, udělám vše za vás.

V systému Yandex Metrica lze cíle nalézt v nabídce Nastavení - Cíle.

V Google Analytics jsou cíle na úrovni prezentace, v nabídce je položka Cíle.

Jaký druh nástroje je tento „cíl“ a k čemu slouží?

Když návštěvníci navštíví váš web, začnou vydělávat maximum různé akce. Mohou se začít pohybovat z jedné stránky na druhou, začít vyplňovat jakékoli formuláře na webu, klikat na některé prvky (například tlačítka, posuvník, obrázky atd.) a mohou sledovat různé odkazy atd. d.

V závislosti na účelu vašeho webu a na tom, k čemu jste je vytvořili, mohou být některé akce, které návštěvníci provádějí, pro vás cennější než jiné. Můžete je zvýraznit před ostatními.

V závislosti na tom, jaký druh webu máte a k čemu jste jej vytvořili, se tyto typy akcí mohou lišit a vy sami můžete určit, které z těchto akcí pro vás budou hodnotnější.

Například pro internetový obchod mohou být tyto cenné akce:

Nákup produktu

Klikněte na tlačítko "Přidat do košíku"

Klikněte na tlačítko koupit

Tyto akce pro internetový obchod přímo ovlivňují jeho tržby. K hlavnímu účelu, pro který tento internetový obchod vznikl, ale vznikl za účelem prodeje zboží. Všechny akce, které uživatelé podniknou, pokud jde o přechod ke koupi produktu, tedy budou cílené pro tento web.

Pro zpravodajský web mohou být úkoly poněkud odlišné. Například zpravodajský web může mít za cíl oslovit co nejrychleji co nejvíce lidí. K tomu je důležité, aby se lidé na této stránce zapojovali, aby pro ně byla zajímavá a chtěli se tam vracet.

Pro zpravodajský web proto může být tak cennými akcemi hloubka procházení ze strany návštěvníků stránek, jak hluboko stránky webu procházejí a kolik času na něm tráví.

Systémy webové analýzy vám umožňují oddělit tyto cenné akce návštěvníků na webu do samostatné skupiny nazývané cíle.

Faktem je, že v analytických přehledech ve výchozím nastavení vidíme takové analytické ukazatele, jako jsou návštěvy, návštěvníci, opuštění, hloubka zobrazení, čas na webu, ale nevidíme žádné konkrétní akce, které uživatel na stránce provádí.

V systémech webové analýzy ve výchozím nastavení nevidíme kliknutí na některé odkazy, kliknutí na některé oblasti na stránce, vyplňování formulářů atd.

Všechny tyto události, které navíc provádí uživatel na stránce, je třeba konfigurovat samostatně v systémech webové analýzy a to lze provést pomocí cílů, aby bylo možné tyto události detekovat a vidět.

Cíle je nástroj, který vám umožní zaznamenávat akce vašich návštěvníků, které jsou pro vás důležité.

Pokud je nastavíte, systém webové analýzy začne tyto akce „vidět“.

Co vám poskytnou přizpůsobené cíle na vašem webu?

1) Budete rozumět zdrojům, které přivádějí na váš web lidi, kteří od vás nakupují nebo provádějí nějaké jiné akce. Budete vědět, odkud přicházejí návštěvníci, kteří jsou cíleni na vaše stránky.

Když znáte zdroje, které pro vás fungují, můžete tam investovat více peněz a pozornost a získejte více výsledků.

2) Budete schopni sestavit vizuální reporty, které vám ukážou nejen data o tom, kolik lidí na váš web přišlo, ale také data o tom, kolik lidí provedlo tu či onu cílovou akci, která by pro vás byla důležitá. Zobrazí se sloupce dosažení cíle a konverze.

3) Můžete vytvořit trychtýře pro vícefázové procesy.

Pomocí těchto trychtýřů můžete vidět, kolik a v jaké fázi vícefázového procesu jsou návštěvníci odpleveleni. Uvidíte slabý článek a můžete dojít k závěru, že v určité fázi může být něco špatně a musíte tomu věnovat více pozornosti.

4) Nastavením cílů můžete v přehledech filtrovat pouze cílené návštěvy.

5) Lidé, kteří dokončili cílovou akci na webu, mohou inzerovat v systémech, jako je Yandex Direct, Google Adwords. Pomocí cílů víte, že určitá skupina návštěvníků je vám věrná a zajímá se o váš produkt nebo službu a můžete inzerovat pouze tomuto zainteresovanému segmentu lidí, platit méně peněz za reklamu a získat více výsledků.

Cíle jsou nástrojem, který ukazuje, kde jsou peníze.

Zpřehledňuje proces analýzy statistik vašeho webu

Doufám, že se mi podařilo přesvědčit vás, že cíle jsou pro váš web důležité, zvláště pokud je tento web o prodeji.

Pokud se chcete dozvědět více o cílech, jak je to celé nastaveno a kde, přejděte na následující videa.

S výběrem cílů pro web může být spousta funkcí, kontroverzních a řečnických otázek.

Zkusme se společně s vámi naučit, jak určit události na webu, pro které byste měli a pro které NEMĚLI dávat cíle.

2) Napište, pro jaké akce si na tomto webu stanovíte cíle? Proč jste si vybrali tyto akce? Proč je to důležité?

Pište, budeme si rozumět, diskutovat a učit se spolu.