Cómo instalar fragmentos de JavaScript y códigos de sitio web en su sitio web
Hay toneladas de grandes herramientas que le ayudarán a mejorar la experiencia del sitio web que usted proporciona, hacer crecer su negocio en línea, y hacer mejores conexiones con sus clientes.
Tose…como Agencia Analitica Web…tos… ?
Y muchas de estas herramientas también son gratis!
Pero usted no es un desarrollador web. ¿Cómo diablos instalas estas herramientas en primer lugar?
Irónicamente, para las empresas que proveen estas herramientas, uno de los mayores obstáculos para su propio crecimiento es conseguir que sus usuarios instalen su código.
Bueno, hoy, voy a tratar de resolver este problema para todos los involucrados. Voy a repasar algunas de las formas más comunes en que la gente pone código en su sitio web. En este artículo, voy a repasar cómo instalar el código del sitio web / fragmentos de JavaScript para:
- Sitios web «impulsados por» WordPress (el sistema de gestión de contenidos, NO WordPress.com)
- Sitios web codificados a mano (repasaremos cómo instalar scripts y fragmentos usando el FTP de la vieja escuela)
- Sitios web de Squarespace
- Sitios web de Shopify
Para aquellos de ustedes en un sitio Etsy o Tumblr, estas plataformas son un poco… bueno… no son realmente soluciones completas de sitios web. Etsy es realmente un mercado y Tumblr es una mezcla entre un sitio de medios sociales y una plataforma de blogs.
EtsyTumblr
Finalmente, hablaré un poco sobre los sitios web de Wix al final. En su mayor parte, no te permiten instalar ningún código de sitio web antiguo ni fragmentos de JavaScript, pero sí tienen algunas integraciones para varios servicios de sitios web.
Wix
¿Qué es este código de sitio web o fragmento del que hablas?
Sí, hablemos primero del «código» que intentas instalar.
Por lo tanto, muchas herramientas de marketing de sitios web requieren que instales su código en tu sitio web. Agencia Analitica Web funciona de la misma manera. Echemos un vistazo al código de Agencia Analitica Web
Una vez que ingreses al panel de control de Agencia Analitica Web, verás un enlace en la parte inferior izquierda llamado «Mi código»
Haga clic en ese enlace y será llevado a una página donde su código de seguimiento de Agencia Analitica Web se presenta convenientemente para usted en una bonita caja azul claro.
Lo que va a querer hacer, independientemente de si es el código de seguimiento de Agencia Analitica Web o cualquier otro código de seguimiento, es pegar ese código en cada página web de su sitio web.
cada página web
Dado que esta pequeña operación puede ser la primera vez para ti o que tienes problemas para hacerla, vamos a entrar en el meollo de lo que se necesita para hacer esto.
Cómo poner código en un sitio web que está potenciado por WordPress
Estás de suerte. Hay un plugin que hace esta tarea bastante fácil. Se llama Tracking Code Manager.
Entra en tu sitio web. Si estás ejecutando WordPress, serás llevado a tu panel de control. Haga clic en «Plugins»
Una vez que llegue a la pantalla de Plugins, haga clic en «Add New»
En el cuadro de búsqueda de la derecha, busca «Tracking Code Manager» y luego presiona «Install Now»
Una vez que termine la instalación, asegúrate de activar el plugin. Pulsa en «Configuración»
activa
Pulsa en «Añadir nuevo código de seguimiento»
… ¡e inserta tu código! Asegúrate de hacer clic en «Guardar»
save
Ahora, si por alguna razón no quieres usar el plugin Tracking Code Manager (o no puedes), siempre puedes poner manualmente el código de seguimiento en la cabecera.
Cómo poner código en un sitio web que está potenciado por WordPress.com
Siempre ha habido MUCHA confusión entre un sitio web que está potenciado por WordPress y un sitio web de WordPress.com. Eso es porque son dos cosas diferentes!
Yo culpo a WordPress (o Auttomatic) por ponerle una marca a estos dos servicios tan similares. Pero déjame explicarte:
- Un sitio web que es Potenciado por WordPress es un sitio web que tiene el software de gestión de contenidos de WordPress instalado en su propio servidor web. Esto significa que usted pagó por un nombre de dominio (myname.com) Y está pagando por el alojamiento web para hospedar los archivos de su sitio web. En este caso, usted u otra persona habría instalado el software de WordPress en su servidor web (webhost) y quizás lo habría personalizado en su sitio web actual
- . Un sitio web de WordPress.com es normalmente gratuito. Habrías ido a WordPress.com y te habrías registrado en tu sitio web. No pagas por las tarifas de alojamiento web y has empezado con una URL como: myname.wordpress.com. A partir de ahí, podrías haber hecho los pasos necesarios para obtener tu propio nombre de dominio personalizado, etc. (myname.com).
Si tienes un sitio web de WordPress.com, estás algo limitado por el código del sitio web y el JavaScript que puedes instalar en tu sitio web. Esto se debe a que tienen un protocolo de seguridad que deben seguir y no pueden dejar que los usuarios empiecen a pegar cualquier código antiguo en su plataforma. MySpace aparentemente ha sido eliminado por esto!
Sin embargo, WordPress.com tiene varias actualizaciones para los planes de negocio. Por ejemplo, tienen una integración con Google Analytics y proporcionan formas de personalizar su sitio web, como la adición de botones de medios sociales. Por lo que puedo decir, obtener una cuenta gratuita de WordPress.com para utilizar varios servicios y herramientas del sitio web es bastante limitado. En todo caso, parece que necesitarás actualizar a un plan de negocios para desbloquear tus habilidades para hacerlo.
Necesitarás actualizar a un plan de negocios
Cómo instalar códigos de sitios web y fragmentos de JavaScript en sitios web codificados a mano usando FTP
De vuelta a la vieja escuela.
Hasta el día de hoy, muchos sitios web están «codificados a mano», lo que significa que fueron creados desde cero y no usan un sistema de administración de contenido. Si tu sitio web entra en esta categoría, vas a necesitar «FTP» en tu sitio para hacer cambios (o usar un repositorio de control de versiones).
FTP significa «File Transfer Protocol» (Protocolo de transferencia de archivos). Puede descargar programas gratuitos de FTP como FileZilla para permitirle enviar por FTP «a» su sitio web
. Puedes añadir archivos, reemplazarlos, borrarlos e incluso cambiar los nombres de los mismos con un programa FTP.
Te prometo que después de 20 minutos de jugar con un programa FTP, lo tendrás lamido. La parte más difícil para la mayoría de la gente es simplemente conectarse con su servidor web.
Por lo general, la gente se queda atascada en conseguir que su nombre de host y su nombre de usuario sean correctos. O no saben su contraseña de FTP.
La solución: llama a tu servidor web. Puede tardar una hora, pero le guiarán a través de él. Puede que valga la pena grabar su pantalla durante esa llamada. O al menos toma algunas buenas notas.
llama a tu anfitrión web
Una vez que estés dentro, una de las primeras cosas que querrás hacer es hacer una copia de seguridad de tu sitio web. Es una idea inteligente. Si haces un boo-boo más tarde, al menos tendrás una copia de seguridad de todos tus archivos.
Puedes hacer esto simplemente arrastrando (copiando) TODOS tus archivos DESDE tu servidor web a tu ordenador. Normalmente hago una carpeta en mi escritorio llamada algo como «My Website Backup June 2017». Arrastro TODOS los archivos de mi sitio web a esa carpeta. A veces incluso hago una copia de seguridad de esa carpeta o hago un archivo .zip de ella. Sí – doble copia de seguridad
Si utilizas un programa FTP como FileZilla, normalmente obtendrás una interfaz de dos paneles. El lado izquierdo suele mostrar los archivos de su ordenador, y el panel derecho muestra los archivos de su servidor web.
Arrastrando los archivos de un lado a otro puede reemplazar los archivos de un sistema a otro.
Unas palabras de precaución
Reemplazar los archivos puede ser ligeramente peligroso. Si un archivo es más nuevo o más antiguo que el otro archivo en su servidor web o en su ordenador, y reemplaza exactamente el mismo archivo en el otro sistema, perderá una versión de ese archivo.
En la mayoría de los casos, eso es exactamente lo que quiere hacer. Está haciendo cambios en su sitio web, por lo que obviamente tiene una versión de archivo más reciente que necesita salir al aire. Pero, eso significa que no hay vuelta atrás a una versión anterior si has cometido un error. Por eso es una gran idea hacer una copia de seguridad de todos tus archivos web antes de hacer cualquier cambio
Si cometes un error y tienes archivos de copia de seguridad, puedes simplemente abrir tu carpeta de copia de seguridad y colocar el archivo original donde lo necesites.
Ahora…sobre la instalación de códigos de sitios web
Según mi experiencia, la mayoría de la gente tiene uno de los tres tipos de sitios web:
- Un sitio web que utiliza el sistema de gestión de contenidos de WordPress
- Un sitio web que utiliza algo similar a WordPress
- Un sitio web codificado a mano
Si utilizas WordPress o un sistema de gestión de contenidos, todo lo que tienes que buscar es el encabezado.php o un archivo llamado «header» o «head». Normalmente, ese es el archivo que dicta la secciónde TODAS tus páginas web. Aquí es donde deberían ir la mayoría de los códigos y recortes de páginas web.
Vas a pegar el código de la página web (o el recorte) en tu archivo de cabecera y normalmente estará activo en TODAS tus páginas web. Un archivo para regirlas todas!
Utiliza un programa gratuito como Sublime Text para abrir este archivo. Abre el archivo que está en tu computadora (no es el mismo archivo que está en tu servidor web)
Usualmente, solo hago click derecho en el archivo y lo abro con Texto Sublime. Lo que aparecerá es un hermoso arco iris de prosa de páginas web codificadas con colores mágicos.
Algunos de ustedes pueden asustarse. Pero no lo hagan. No les hará daño. Descifrémoslo rápidamente.
Todas las páginas web pueden ser divididas en dos secciones simples. La cabeza y el cuerpo. La cabeza se designa con el código HTML y . El cuerpo se designa cony.
La mayoría de las «cosas» que hacen que tu página web funcione y muestre texto e imágenes van entre estas dos secciones. Normalmente puedes hacer un Find en la página para localizar estas etiquetas HTML.
Si el código de la página web o el fragmento de JavaScript es necesario para entrar en la de tu página web… bueno, apuesto a que tienes una buena idea de dónde debe ir ese código.
Una vez que hayas insertado tu código o fragmento, guarda tu archivo y súbelo a tu servidor web para hacer el nuevo archivo de cabecera en vivo.
Ahora, si tu sitio web fue codificado a mano y no parece haber un archivo de cabecera o encabezado, es posible que tengas que pegar el código de tu sitio web en cada página web. A veces esto no es gran cosa. Si tu sitio web tiene sólo 5 páginas, entonces sólo tienes que pegar el código 5 veces.
Arriba, es un hipotético sitio web HTML que consiste en cuatro archivos HTML. En este caso, usted abriría todos estos archivos e insertaría el código de su sitio web (o fragmento) en el de cada archivo. Finalmente, los guardaría y los subiría a su servidor web, reemplazando los archivos más antiguos por estos archivos más nuevos y actualizados.
¿Cómo sabré si ha funcionado?
Por lo general, el código del sitio web (o fragmento) que instale establecerá una línea de comunicación con el servicio que esté utilizando. Casi todos los servicios le harán saber si su código funciona o no. Por ejemplo, si estás instalando el código de seguimiento de Google Analytics, cuando accedas a tu cuenta de Google Analytics, te dirá si tu código se ha instalado correctamente o no.
Cómo poner código en un sitio Squarespace
Para aquellos de vosotros que estéis utilizando Squarespace para vuestro sitio web, hacen que insertar códigos de sitio web y fragmentos de JavaScript sea bastante fácil. Puedes usar «code injection» para insertar código.
En tu Menú de Inicio, haz clic en Configuración > Avanzado > Code Injection. Puede añadir código a su o al pie de su sitio web. Aquí está el resumen de las capturas de pantalla:
Comience haciendo clic en «SETTINGS»
Desplácese un poco hacia abajo y luego haga clic en «Advanced».»
Luego haga clic en «Inyección de código»
Por lo general, va a querer insertar el código de su sitio web en la de sus páginas web. También tienen una opción para poner el código en tu pie de página si necesitas hacerlo.
Finalmente, asegúrate de hacer clic en «GUARDAR»
Cómo poner el código en un sitio de Shopify
Desde tu administrador de Shopify, haz clic en «Tienda Online». A continuación, seleccione «Temas»
. A continuación, seleccione «Editar HTML/CSS»
Seleccione «Recortes»
Haga clic en «Snippets» para abrir el cuadro de diálogo «Add a new snippet»
Haga clic en «Add a new snippet». Se le dará un formulario para añadir un nuevo recorte.
Dé un nombre a su recorte y haga clic en el botón «Crear recorte».
Introduzca el código de su recorte en el área de «tracking snippet.liquid». Haz clic en «Guardar» y ya puedes empezar!
Cómo poner código en un sitio web de Wix
Wix se está convirtiendo rápidamente en un creador de sitios web muy popular. Es similar a WordPress.com en el sentido de que estás bastante limitado por los códigos y fragmentos que puedes instalar. Básicamente está bloqueado, al igual que WordPress.com
. Sin embargo, tienen un Wix App Market donde puedes obtener varias soluciones de marketing, medios sociales y análisis que funcionan en tu sitio. También puedes votar sobre soluciones muy necesarias aquí
Con suerte, esto te ayudó
Si estás usando otro sistema para tu sitio web, verifica si proporcionan plugins, extensiones o complementos para ayudarte a obtener el código que necesitas en tu sitio. Muchas veces, los proveedores de sitios web tendrán integraciones para los servicios que necesitas. Sólo tienes que investigar un poco y no tengas miedo de llamar o enviar un correo electrónico a su centro de soporte