Как установить сниппеты JavaScript и коды веб-сайтов на свой сайт

Существует масса отличных инструментов, которые помогут вам улучшить качество работы сайта, развить свой онлайн-бизнес и наладить более тесные связи с клиентами. К тому же многие из этих инструментов бесплатны! Но вы не веб-разработчик. Как, черт возьми , установить эти инструменты? Как ни странно, для компаний, предоставляющих эти инструменты, одним из самых больших камней преткновения на пути к собственному росту является привлечение пользователей к установке их кода. Сегодня я попытаюсь решить эту проблему для всех участников. Я расскажу о нескольких наиболее распространенных способах установки кода на сайт. В этой статье я расскажу о том, как установить код сайта / сниппеты JavaScript для:

• Веб-сайты «на базе» WordPress (система управления контентом, НЕ сайты WordPress.com)
• Веб-сайты, созданные вручную (мы рассмотрим, как устанавливать скрипты и сниппеты с помощью старого доброго FTP)
• Веб-сайты Squarespace
• Веб-сайты Shopify

Для тех, у кого есть сайт Etsy или Tumblr, эти платформы являются… ну… не совсем полноценными веб-сайтами. Etsy — это действительно торговая площадка, а Tumblr — нечто среднее между социальной сетью и платформой для ведения блогов. Наконец, в самом конце я немного расскажу о сайтах Wix. По большей части они не позволяют устанавливать старый код сайта или фрагменты JavaScript, но у них есть несколько интеграций для различных сервисов сайтов.

Что это за код сайта или сниппет, о котором вы говорите?

Да, давайте сначала поговорим о «коде», который вы пытаетесь установить. Многие маркетинговые инструменты для веб-сайтов требуют установки их кода на ваш сайт. Crazy Egg работает точно так же. Давайте посмотрим на код Crazy Egg. Когда вы войдете в свою панель управления Crazy Egg, в левом нижнем углу вы увидите ссылку «Мой код».

Щелкните по этой ссылке, и вы попадете на страницу, где ваш код отслеживания Crazy Egg будет удобно представлен вам в красивом светло-голубом окошке.

Что вы захотите сделать, независимо от того, будет ли это код отслеживания Crazy Egg или любой другой код отслеживания, так это вставить этот код на каждую веб-страницу вашего сайта. Поскольку эта крошечная операция может быть для вас первой или вы испытываете затруднения, мы расскажем о том, что нужно для ее выполнения.

Как разместить код на сайте, работающем на WordPress

Вам повезло. Существует плагин, который делает эту задачу чертовски простой. Он называется Tracking Code Manager. Войдите на свой сайт. Если вы используете WordPress, вы попадете на свою приборную панель. Нажмите на «Плагины».

Как только вы попадете на экран плагинов, нажмите «Добавить новый».

В поисковой строке справа найдите «Tracking Code Manager», а затем нажмите «Установить сейчас».

После установки убедитесь, что вы активировали плагин. Нажмите на «Настройки».

Нажмите на кнопку «Добавить новый код отслеживания».

…И вставьте свой код! Не забудьте нажать кнопку сохранить.

Если по каким-то причинам вы не хотите использовать плагин Tracking Code Manager (или не можете), вы всегда можете вручную поместить код отслеживания в файл header.php вашей темы WordPress (мы рассмотрим это в ближайшее время).

Как разместить код на сайте, работающем на WordPress.com

Всегда было много путаницы между сайтом, работающим на WordPress, и сайтом WordPress.com. Это потому, что это две разные вещи! Я как бы виню WordPress (или Auttomatic) за то, что они так одинаково брендируют эти два разных сервиса. Но позвольте мне объяснить:

• Сайт на базе WordPress — это сайт, на котором программное обеспечение для управления контентом WordPress установлено на вашем собственном веб-сервере. Это означает, что вы заплатили за доменное имя (myname.com) и платите за хостинг для размещения файлов вашего сайта. В этом случае вы или кто-то другой установил программное обеспечение WordPress на ваш веб-сервер (веб-хост) и, возможно, настроил его для вашего текущего веб-сайта.
• Сайт WordPress.com обычно бесплатный. Вы зашли на WordPress.com и зарегистрировали свой сайт. Вы не платите за хостинг и начинаете с URL-адреса типа: myname.wordpress.com. Затем вы могли бы сделать необходимые шаги, чтобы получить собственное доменное имя и т. д. (myname.com).

Если вы используете сайт WordPress.com, вы несколько ограничены в том, какой код и JavaScript вы можете установить на свой сайт. Это связано с тем, что у них есть протокол безопасности, которого они должны придерживаться, и они не могут позволить пользователям вставлять любой старый код в свою платформу. MySpace, очевидно, был закрыт из-за этого! Однако у WordPress.com есть различные обновления для бизнес-планов. Например, у них есть интеграция с Google Analytics, и они предлагают способы настройки вашего сайта, например, добавление кнопок социальных сетей. Насколько я могу судить, возможности бесплатной учетной записи WordPress.com для использования различных сервисов и инструментов сайта довольно ограничены. Похоже, что вам придется перейти на бизнес-план, чтобы раскрыть свои возможности.

Как установить коды сайтов и сниппеты JavaScript на сайты с ручным кодом с помощью FTP

Возвращаемся к старой школе.

По сей день многие веб-сайты «написаны вручную», то есть созданы с нуля и не используют систему управления контентом. Если ваш сайт относится к этой категории, то для внесения изменений вам потребуется «FTP» (или использование хранилища контроля версий). FTP расшифровывается как «протокол передачи файлов». Вы можете скачать бесплатные FTP-программы, например FileZilla, которые позволят вам передавать файлы по FTP на ваш сайт. По сути, FTP-программа позволяет перетаскивать файлы и изображения сайта на веб-сервер, где размещен ваш сайт. С помощью FTP-программы можно добавлять файлы, заменять их, удалять и даже изменять имена файлов. Я обещаю, что после 20 минут возни с программой FTP вы разберетесь с этим. Самая сложная часть для большинства людей — это простое соединение с веб-сервером. Обычно люди застревают на том, чтобы правильно указать имя хоста и имя пользователя. Или они не знают свой FTP-пароль. Решение: позвоните своему хостеру. Это может занять час, но они проведут вас через все это. Возможно, стоит записать свой экран во время разговора. Или хотя бы сделать несколько хороших заметок. Как только вы войдете в систему, одним из первых дел, которые вы захотите сделать, будет создание резервной копии вашего сайта. Это просто разумная идея. Если впоследствии вы допустите ошибку, у вас, по крайней мере, будет резервная копия всех файлов. Это можно сделать, просто перетащив (скопировав) ВСЕ файлы с веб-сервера на свой компьютер. Обычно я создаю на рабочем столе папку под названием «My Website Backup June 2017». Я перетаскиваю ВСЕ файлы моего сайта в эту папку. Иногда я даже делаю резервную копию этой папки или создаю из нее .zip-файл. Да, двойное резервное копирование. Если вы используете FTP-программу, например FileZilla, у вас обычно будет двухпанельный интерфейс. В левой части обычно отображаются файлы на вашем компьютере, а в правой — файлы на веб-сервере.

Перетаскивая файлы туда-сюда, вы можете заменять их с одной системы на другую.

Слово предостережения

Замена файлов может быть немного опасной. Если один файл новее или старше другого на вашем веб-сервере или компьютере, и вы замените точно такой же файл на другой системе, вы потеряете версию этого файла. В большинстве случаев это именно то, что вы хотите сделать. Вы вносите изменения в свой сайт, поэтому, очевидно, у вас есть более новая версия файла, которая должна быть запущена. Но это означает, что вы не сможете вернуться к предыдущей версии, если допустили ошибку. Именно поэтому перед внесением изменений стоит создать резервные копии всех веб-файлов. Если вы допустили ошибку и у вас есть резервные файлы, вы можете просто открыть папку с резервными копиями и поместить оригинальный файл туда, куда вам нужно.

Теперь… перейдем к установке кодов сайта

По моему опыту, у большинства людей есть один из трех видов веб-сайтов:

1. Веб-сайт, использующий систему управления контентом WordPress
2. Веб-сайт, использующий что-то похожее на WordPress
3. Веб-сайт, созданный вручную

Если вы используете WordPress или систему управления контентом, все, что вам нужно искать, — это файл header.php или файл с названием «header» или «head». Обычно именно этот файл определяет раздел <head> всех ваших веб-страниц. Именно здесь должно находиться большинство кодов и сниппетов сайта.

Вы вставите код сайта (или сниппет) в заголовочный файл, и он будет активен на всех ваших веб-страницах. Один файл для всех! Используйте бесплатную программу, например Sublime Text, чтобы открыть этот файл. Откройте файл, который находится на вашем компьютере (не тот же самый файл, который находится на вашем веб-сервере). Обычно я просто щелкаю правой кнопкой мыши на файле и открываю его с помощью Sublime Text. Появляется прекрасная радуга волшебно раскрашенной прозы сайта. Некоторые из вас могут испугаться. Но не надо. Это не причинит вам вреда. Давайте быстро расшифруем его. Все веб-страницы можно разделить на две простые части. Это голова и тело. Голова обозначается HTML-кодом <head> и </head>. Тело обозначается кодами <body> и </body>.

Между этими двумя разделами находится большая часть того, что заставляет вашу веб-страницу работать и отображать текст и изображения. Чтобы найти эти HTML-теги, обычно можно воспользоваться командой Find на странице. Если код сайта или фрагмент JavaScript должен быть помещен в <head> вашего сайта… могу поспорить, что вы хорошо представляете, куда этот код должен быть помещен.

После того как вы вставили свой код или фрагмент, сохраните файл и загрузите его на веб-сервер, чтобы новый файл head стал реальным. Если ваш сайт был создан вручную и на нем нет файла head или header, вам, возможно, придется вставлять код сайта в каждую веб-страницу. Иногда в этом нет ничего сложного. Если на вашем сайте всего 5 страниц, то вам просто придется вставить код 5 раз.

Выше представлен гипотетический HTML-сайт, состоящий из четырех HTML-файлов. В этом случае вы откроете все эти файлы и вставите код (или фрагмент) вашего сайта в <head> каждого файла. Наконец, вы сохраните их и загрузите на свой веб-сервер, заменив старые файлы новыми, обновленными.

Как я узнаю, что это сработало?

Обычно установленный вами код (или фрагмент) сайта устанавливает линию связи с используемым сервисом. Почти все сервисы сообщат вам, работает ли ваш код или нет. Например, если вы устанавливаете код отслеживания Google Analytics, то при входе в свой аккаунт Google Analytics он сообщит вам, правильно ли установлен ваш код или нет.

Как разместить код на сайте Squarespace

Для тех, кто использует Squarespace для создания своего сайта, они делают вставку кодов сайта и фрагментов JavaScript довольно простой. Для вставки кода можно использовать «инъекцию кода». В главном меню нажмите «Настройки» > «Дополнительно» > «Вставка кода». Вы можете добавить код либо в <head>, либо в нижний колонтитул вашего сайта. Ниже приведены скриншоты:

Начните с нажатия на «НАСТРОЙКИ».

Прокрутите страницу вниз, а затем нажмите «Дополнительно».

Затем щелкните на «Инъекция кода».

Обычно вы хотите вставить код сайта в <head> веб-страницы. У них также есть возможность поместить код в нижний колонтитул, если вам это необходимо. Наконец, обязательно нажмите «Сохранить».

Как разместить код на сайте Shopify

В админке Shopify нажмите на «Интернет-магазин». Затем выберите «Темы».

Нажмите на поле «Действия», чтобы открыть выпадающее меню. Затем выберите «Редактировать HTML/CSS».

Выберите «Сниппеты».

Нажмите на «Сниппеты», чтобы открыть диалоговое окно «Добавить новый сниппет».

Нажмите на «Добавить новый сниппет». Перед вами откроется форма для добавления нового сниппета.

Назовите свой сниппет и нажмите на кнопку «Создать сниппет».

Введите код вашего сниппета в поле для «отслеживания сниппета.liquid». Нажмите «Сохранить», и все готово!

Как разместить код на сайте Wix

Wix быстро становится популярным создателем сайтов. Он похож на WordPress.com тем, что вы довольно ограничены в том, какие коды и сниппеты вы можете установить. По сути, он заблокирован так же, как и WordPress.com. Однако у них есть Wix App Market, где вы можете приобрести различные решения для маркетинга, социальных сетей и аналитики, работающие на вашем сайте. Вы также можете проголосовать за нужные решения здесь.

Надеюсь, это вам помогло

Если вы используете другую систему для своего сайта, проверьте, предоставляют ли они плагины, расширения или дополнения, чтобы помочь вам получить необходимый код на вашем сайте. Во многих случаях поставщики веб-сайтов предлагают интеграции для нужных вам сервисов. Просто немного покопайтесь и не бойтесь звонить или писать в их центр поддержки.