Contenido 12 secciones
- ¿Qué es la gestión de scripts?
- ¿Para qué se usa la gestión de scripts?
- ¿Qué campos hay en el panel de gestión de scripts?
- ¿Cómo afecta un script a la velocidad de la página?
- ¿Cómo añadir un script al sitio con seguridad?
- Seguridad y datos en la gestión de scripts
- ¿Cómo se prueba un script añadido?
- Errores más frecuentes en la gestión de scripts
- Lista de comprobación para añadir scripts con seguridad
- ¿Cuándo es la gestión de scripts la solución adecuada?
- Gestión de scripts con Faprika
- Preguntas frecuentes
Un día, a una tienda online le falta algo: una ventana de chat en vivo para hablar con los visitantes, un botón de mensajería en la página de inicio, el código de seguimiento que piden las herramientas de publicidad y análisis o una pequeña corrección visual en una sola página. Para nada de esto hace falta reescribir el sitio, pero para todo hay que añadir un fragmento de código a sus páginas. La pregunta de dónde, para quién, en qué orden y de qué forma reversible añadir ese código determina directamente la velocidad y el orden del sitio.
En esta guía gestión de scripts se aborda como la disciplina de añadir código personalizado desde el panel: qué es, para qué trabajos se usa, cómo se rellena cada campo, cómo afecta el código a la velocidad de la página, cómo se prueba tras añadirlo, cómo se revierte si surge un problema y qué errores son los más comunes. También hay dos herramientas pequeñas: una calculadora de presupuesto que estima la carga de scripts de la página y una revisión de ocho puntos para añadir scripts con seguridad. Para la velocidad general del sitio, consulte la importancia de la velocidad del sitio, y para la distribución de archivos estáticos CDN rehberi hay artículos aparte; aquí solo vemos el lado de velocidad y seguridad del código que se añade después a la página.
¿Qué es la gestión de scripts?
La gestión de scripts es el área que permite añadir, editar y, cuando haga falta, eliminar desde el panel código como HTML, CSS y jQuery en las páginas de una tienda online. El objetivo es añadir a las páginas áreas dinámicas e interactivas.
En Faprika, esta área es Gestión de scripts, dentro de Gestión de contenido. Al entrar y pulsar Añadir nuevo, crea un campo de script; el código que escriba se coloca en las páginas del sitio, en la posición que elija. Es decir, no necesita editar a mano los archivos de la plantilla ni subir el código a un servidor. El código queda como un registro: tiene un nombre, una posición, un idioma y un alcance; puede activarlo o desactivarlo, modificarlo o eliminarlo. Para los pasos del panel, consulte la formación sobre Gestión de scripts.
Esta área tiene además una condición que debe conocerse de antemano: se necesitan conocimientos suficientes de código. Como también se advierte en la formación, las operaciones realizadas en esta área sin un nivel suficiente de conocimientos de código pueden causar fallos de diseño. Por eso la gestión de scripts no es un área de “copiar y pegar”, sino un área en la que se sabe lo que se hace y se deja preparada la vía de reversión.
Le recomendamos leer¿Por qué es importante la velocidad del sitio en el comercio electrónico?¿Para qué se usa la gestión de scripts?
La gestión de scripts se usa para hacer adiciones pequeñas y dirigidas que la plantilla no ofrece: los códigos de seguimiento y medición, la ventana de chat en vivo, un botón de mensajería, un botón personalizado o una corrección de estilos son los principales.
Los ejemplos de la formación son dos: añadir a la página de inicio un botón “Pedir por mensaje” y añadir una ventana de chat (ayuda). En la práctica, los usos se amplían en torno a ellos. La siguiente imagen resume cuatro tipos de uso habituales y el punto al que hay que prestar atención en cada uno.
| Uso | Tipo de código habitual | Posición recomendada | Aspecto a tener en cuenta |
|---|---|---|---|
| Código de seguimiento y medición | Script | Inicio de página (header) o final (footer), según la guía de la herramienta | Funciona en todo el sitio; una instalación incorrecta daña los datos y añade carga |
| Ventana de chat en vivo | Script | Normalmente el final de página (footer) | Efecto en el aspecto y la carga inicial; choque con otros botones en móvil |
| Mensajería o botón personalizado | HTML + CSS | Página y posición correspondientes | Si el enlace es correcto y si el área táctil es suficiente en el móvil |
| Corrección de estilo | CSS | Inicio de página (header) | Mantener el alcance acotado; no alterar el aspecto de otras páginas |
Códigos de seguimiento y medición
Las herramientas de publicidad y análisis suelen pedir un código corto que se añade a todas las páginas del sitio. La gestión de scripts le permite mantener ese código en un único registro, con un nombre. Saber qué código funciona dónde es requisito para poder eliminarlo cuando deje de usar una herramienta. Para la medición del lado del servidor, puede consultar además el artículo sobre seguimiento de conversiones desde el servidor.
Ventana de chat en vivo
La ventana que se queda en la esquina de la página para hablar con los visitantes también es un código. Como es un elemento que el visitante ve, es una de las adiciones que más atención requieren, tanto en velocidad como en diseño. Sobre el efecto del chat en vivo en las ventas, canlı destek yazısı hay contenido aparte; aquí solo importa cómo se añade el código al sitio.
Botones personalizados y pequeños añadidos de interfaz
Pequeñas piezas de interfaz, como un botón de mensajería en la página de inicio, un cuadro de información adicional en una página o una nota de campaña, se añaden con HTML y CSS. Según la formación, el código HTML se coloca sin envolverlo en ninguna etiqueta; para el estilo se abre una etiqueta style y para jQuery una etiqueta script.
Correcciones de estilo
Si en el aspecto que ofrece la plantilla hace falta un pequeño ajuste en una sola página, una regla CSS suele bastar. Aquí la regla de oro es mantener el alcance acotado: se escriben reglas que afectan solo al elemento que se persigue, y que conciernen a una página y no a todo el sitio.
¿Qué campos hay en el panel de gestión de scripts?
Al crear un campo de script en el panel hay estos campos: Código del script, Idioma, Posición en la página, Nombre del script, Parámetros activos y Grupo de usuarios restringido. Cada campo determina cuándo, dónde y para quién funcionará el código.
Código del script
Los códigos HTML, CSS y jQuery que cree se añaden en este campo. Hay que acordarse de abrir la etiqueta style para CSS y la etiqueta script para jQuery; el código HTML, en cambio, se coloca sin envolverlo en ninguna etiqueta. El siguiente ejemplo es un fragmento genérico e inofensivo preparado solo para mostrar la estructura.
<style>
.ozel-not { padding: 12px 16px; background: #f3f6ff; border-radius: 12px; }
</style>
<div class="ozel-not">Bu bölüm örnek bir bilgi notudur.</div>
<script>
document.querySelector(".ozel-not").setAttribute("data-durum", "hazir");
</script>En el ejemplo, las tres partes están por separado: la regla de estilo dentro de una etiqueta style, el elemento visible como HTML sin etiqueta y el comportamiento dentro de una etiqueta script. Mantener la misma separación en un fragmento de código real facilita la depuración.
Idioma
En este campo elige si el código del script será válido solo en un idioma o en todos. En un sitio multilingüe, no querrá mostrar igual en todos los idiomas una pieza que contiene texto, como “Pedir por mensaje”; en ese caso tiene sentido crear un registro distinto por idioma.
Posición en la página
Este campo determina en qué parte de la página se colocará el código. Si elige header, el código se coloca dentro de la etiqueta head; si elige footer, dentro de la etiqueta body, pero al final. Esta elección cambia tanto el momento de ejecución como el efecto en la velocidad; se trata aparte en una sección posterior.
Nombre del script
Es el nombre que se introduce para distinguir los scripts entre sí y debe ser único, sin repetirse. Si el nombre describe el propósito del código y la fecha en que se añadió (“ventana de chat en vivo, noviembre”), quien mire ese registro dentro de seis meses entenderá enseguida por qué está ahí.
Parámetros activos
Si el código que utiliza contiene parámetros, pulse el botón “Parámetros activos” de la parte superior y defina los parámetros que desee. Aquí hay una regla de la que advierte la formación: el parámetro usado solo puede emplearse en los tipos de página en los que es válido. Si usa el parámetro de producto, el tipo de página debe elegirse obligatoriamente como producto; de lo contrario, el parámetro no encuentra su valor.
Grupo de usuarios restringido
Puede restringir los códigos de script según grupos de usuarios. En el ejemplo de la formación, los códigos de script no se añaden para los usuarios no registrados. Así se reduce la carga innecesaria en adiciones que solo interesan a un público concreto; para más detalles sobre los grupos, consulte el artículo sobre grupos de usuarios.
Le recomendamos leer¿Qué son los grupos de usuarios?| Campo | ¿Qué determina? | Conviene saber |
|---|---|---|
| Código del script | HTML, CSS y jQuery que se añadirán | Para CSS se abre una etiqueta style, para jQuery una etiqueta script; el HTML se coloca sin etiqueta |
| Idioma | En qué idiomas funcionará el código | Un idioma o todos los idiomas |
| Posición en la página | Lugar del código en la página | Header dentro de head, footer al final de body |
| Nombre del script | Nombre del registro | Debe ser único |
| Parámetros activos | Parámetros que recibirá el código | Solo funciona en los tipos de página en los que es válido |
| Grupo de usuarios restringido | A quién se añadirá el código | Por ejemplo, puede no añadirse a los no registrados |
¿Cómo afecta un script a la velocidad de la página?
Cada script supone un trabajo adicional que el navegador debe descargar, analizar y ejecutar. Cuantos más scripts haya, cuanto mayores sean y cuanto antes se carguen en la página, más lenta será su apertura.
La velocidad tiene tres componentes y cada uno corresponde a una decisión en la gestión de scripts. El primero es el número: cada script nuevo supone una solicitud o un trabajo adicional. El segundo es el tamaño: un código grande o los archivos adicionales que trae tardan más en descargarse. El tercero es el momento: el código cargado al inicio de la página (header) puede retrasar que la página se vea; el cargado al final (footer) suele quedar por detrás del contenido. Como el efecto exacto depende de lo que haga el código, hay que medir en lugar de dar cifras.
Antes de medir, conviene hacer un presupuesto aproximado. La siguiente herramienta le permite introducir sus propias estimaciones del número de scripts de la página, el tamaño medio y el retraso medio, y ver la carga total. Además, si introduce un supuesto de aplazamiento, muestra cuánto podría ganar haciendo que los scripts esperen a la primera interacción. El resultado se basa en sus supuestos; no sustituye a una medición real.
Al leer la herramienta, tenga en cuenta dos puntos. El primero: en la práctica los retrasos no se suman exactamente, porque algunos scripts se ejecutan en paralelo. Por eso la herramienta hace una suma «estimada» y sencilla; el objetivo no es encontrar el milisegundo exacto, sino ver cómo crece la carga a medida que aumenta el número. El segundo: la mayor ganancia suele estar no en aplazar, sino en no añadir nunca un script innecesario.
¿Encabezado o pie de página?
La elección de la posición de la página es la decisión más importante para la velocidad. El código añadido al encabezado entra dentro de la etiqueta head y el navegador lo encuentra antes de dibujar la página; el código añadido al pie de página entra al final del body y se ejecuta después de que se dibuje el contenido.
- Adecuado para el encabezado: las reglas de estilo necesarias antes de dibujar la página y los códigos de medición cuyas instrucciones indican «añadir dentro de head».
- Adecuado para el pie de página: elementos que basta con que aparezcan una vez dibujada la página, como la ventana de chat en vivo o el botón de mensajería, y los códigos jQuery que se vinculan a elementos de la página.
La regla es sencilla: si las instrucciones de la herramienta indican una posición, sígala; si no, coloque el código en el pie de página y, si hace falta, páselo al encabezado. Avanzar en este orden reduce el riesgo de un código que haga esperar la página sin necesidad.
Okumanızı öneririzCDN Nedir? Ve Ne İşe Yarar?¿Cómo añadir un script al sitio de forma segura?
Añadir un script de forma segura avanza en cuatro pasos: verificar la fuente, acotar el alcance, probar primero y tener lista la vía para revertir. Ninguno es técnicamente difícil; lo difícil es no saltárselos todos en el momento de las prisas.
1. Verifique la fuente
El código que pega en el panel se ejecuta en el navegador de todos los visitantes de su sitio. Por eso no se añade sin saber de dónde viene. El código que obtiene de la pantalla de instalación de una herramienta no merece la misma confianza que el que viene de un artículo o de una persona desconocida. No añada un código que no entienda o cuyo funcionamiento no pueda leer; si es posible, revíselo junto con quien lo escribió o con quien ofrece la herramienta.
2. Acote el alcance
Haga que el código se ejecute solo donde se necesita. La selección de idioma, el tipo de página, el uso de parámetros y un grupo de usuarios restringido son las herramientas para acotarlo. Ejecutar en todo el sitio un código que solo hace falta en la página de producto es una carga que pagan todos los visitantes. También en la parte CSS del código, los selectores deben apuntar únicamente al elemento de destino.
3. Pruebe primero
Antes de publicar el código, decida dónde lo va a probar. Si no tiene un entorno de pruebas, empiece al menos con una página de impacto limitado o con un grupo de usuarios restringido. Durante la prueba no mire solo «si funciona», sino también «si ha roto otra cosa»: revise las rutas críticas, como la página de inicio, la página de producto, el carrito y el paso de pago.
4. Tenga lista la vía para revertir
La propia formación lo recomienda: cuando surja un problema, puede desactivar el script o eliminar el área del script. Por eso cada código se añade como un registro independiente; reunir varias tareas en un solo registro dificulta encontrar qué parte causó el problema. Antes de cambiar el código, guarde su versión anterior en algún lugar.
Un flujo real de adición puede resumirse así:
- Escriba el propósito y el responsable en una frase.
- Verifique la fuente del código; no añada código que no entienda.
- Defina el nombre del script, el idioma, la posición de la página y el alcance.
- Publique primero con un alcance limitado y revise las páginas críticas.
- Si no hay problemas, amplíe el alcance; si los hay, desactive el registro.
- Si el código ya no hace falta, elimine el registro.
Seguridad y datos en la gestión de scripts
Todo script añadido al sitio se ejecuta en el navegador del visitante con los mismos permisos que su página. Por eso, qué recopila el código añadido y adónde lo envía es una cuestión tanto de seguridad como de protección de datos.
Responda tres preguntas antes de añadir el código: qué información del visitante lee o envía el código, si se ha hecho la información necesaria al visitante sobre esa información, y si el código se ejecuta en una página de pago o de inicio de sesión. El alcance del código que se ejecuta en los pasos de pago y de registro debe mantenerse lo más reducido posible y, si no es necesario, no debe añadirse a estas páginas. Si los códigos de seguimiento que se ejecutan en el navegador usan cookies, entra también en juego la gestión de cookies; para más detalles, çerezler y cumplimiento de la KVKK (Ley turca de protección de datos personales) los artículos.
Para las medidas generales de ciberseguridad, hay un artículo sobre ciberseguridad en el comercio electrónico. La regla resumida para la gestión de scripts es esta: añada solo el código de fuentes en las que confíe, mantenga el alcance reducido y elimine el código que ya no use.
¿Cómo probar un script añadido?
Al probar un script, primero se comprueba si el código funciona, después que el resto de la página no se haya roto y, por último, el efecto en la velocidad. Los tres se verifican por separado en el ordenador y en el móvil.
- Función: ¿se ve el elemento añadido, el botón lleva al lugar correcto, la ventana se abre y se cierra?
- Diseño: ¿no se han desplazado otras secciones de la página ni hay solapamientos con otros elementos? ¿Se superponen los elementos de la esquina inferior derecha (chat en vivo, botón de mensajería)?
- Rutas críticas: ¿la página de producto, el carrito y el paso de pago funcionan como antes?
- Móvil: ¿se lee el elemento añadido en una pantalla pequeña y se puede tocar?
- Velocidad: ¿se ha vuelto la página claramente más lenta que antes? Compare midiendo la misma página con el mismo método antes y después de la adición.
- Alcance: ¿se ejecuta el código solo en la página, el idioma y el grupo de usuarios previstos?
En la medición de la velocidad es importante mantener las mismas condiciones: la misma página, la misma conexión, la misma herramienta. Las diferencias pequeñas pueden ser ruido de medición; si hay una diferencia clara, considere aplazar el código, cambiar su posición o eliminarlo.
| Problema | Causa probable | Primer paso |
|---|---|---|
| El elemento añadido no se ve | El alcance es incorrecto (idioma, tipo de página, grupo de usuarios) o el código tiene errores | Revise los campos de alcance; pruebe la posición de la página |
| El diseño de la página se ha roto | La regla CSS es demasiado amplia | Desactive el registro; acote los selectores |
| El parámetro llega vacío | El parámetro no es válido en ese tipo de página | Elija el tipo de página adecuado para el parámetro |
| La página se ha vuelto lenta | Scripts numerosos o pesados, posición temprana | Pase la posición al pie de página; elimine los innecesarios |
| El botón o la ventana se solapa con otro elemento | Se han añadido varios elementos a la misma esquina | Separe las posiciones; revise también en móvil |
Errores más frecuentes en la gestión de scripts
La mayoría de los errores no provienen del código en sí, sino de cómo se añade: añadir sin un propósito, un alcance amplio, no probar y olvidarse de eliminar encabezan esta lista.
- Pegar sin entender: añadir al panel un código de fuente incierta. La advertencia de la formación es clara: sin conocimientos suficientes de código, el diseño puede romperse.
- Reunirlo todo en un solo registro: cuando surge un problema, resulta difícil encontrar qué parte lo causó.
- Dejar el alcance amplio: ejecutar en todo el sitio un código que solo hace falta en la página de producto.
- Usar el parámetro en un tipo de página equivocado: para un parámetro de producto, no seleccionar el producto como tipo de página.
- Añadir el mismo código dos veces: por ejemplo, poner el mismo código de medición tanto en la plantilla como en el panel; los datos se cuentan doble y aumenta la carga.
- No dar un nombre único ni explicarlo: dentro de seis meses nadie sabrá para qué sirve cada registro.
- Publicar sin probar: sobre todo en móvil y en el paso de pago.
- Dejar código sin usar: el código de las herramientas abandonadas sigue ejecutándose y añadiendo carga.
Lista de comprobación para añadir scripts de forma segura
Los ocho puntos siguientes son la revisión que conviene hacer antes y después de añadir un script. La vía más segura es no publicar el código sin haber marcado todos los puntos.
| Campo | Comprobación | ¿Hecho? |
|---|---|---|
| Finalidad | Escrito en una frase, con responsable definido | Sí / No |
| Fuente | Verificado, código comprendido | Sí / No |
| Alcance | Acotado por idioma, tipo de página y grupo de usuarios | Sí / No |
| Ubicación | Encabezado o pie de página elegido a conciencia | Sí / No |
| Nombre | Único y descriptivo | Sí / No |
| Prueba | Ordenador, móvil y páginas críticas | Sí / No |
| Deshacer | Vía de desactivación y código anterior listos | Sí / No |
| Inventario | Los que no se usaban, eliminados | Sí / No |
¿Cuándo es la gestión de scripts la solución adecuada?
La gestión de scripts es la solución adecuada cuando la necesidad del sitio es una adición pequeña, dirigida y reversible. Si la necesidad exige cambiar la estructura del sitio o si no hay conocimientos de código, debe elegirse otra vía.
La gestión de scripts tiene sentido en estos casos: añadir el código de una herramienta a todo el sitio, poner un pequeño botón en la página de inicio, hacer una corrección de estilo en una sola página. Hay que tener cuidado en estos otros: añadir código a pasos críticos como el pago o la membresía, intentar cambiar el funcionamiento básico del sitio, probar código de fuente incierta. En estos casos es más seguro hablar primero con su equipo o con el equipo de Faprika y buscar a alguien con conocimientos de código que pueda hacer el trabajo. Si una función o un complemento ya preparado hace lo mismo, preferirlo es también menos arriesgado que añadir el código a mano; puede encontrar las soluciones ya preparadas de Faprika en la página de complementos.
Gestión de scripts con Faprika
En Faprika, la gestión de scripts se realiza desde el área Gestión de scripts, dentro de Gestión de contenido: crea una nueva área de script, elige el código, el idioma, la posición de la página, el nombre y el alcance, y puede desactivar el registro cuando surja un problema.
La ventaja práctica del área es que el código permanece como registros independientes, sin tocar los archivos de plantilla. Como cada código tiene un nombre, una posición y un alcance, es fácil ver qué código se ejecuta dónde y revertir los cambios. Las opciones de idioma y grupo de usuarios le ayudan a ejecutar el código solo donde hace falta. Para los pasos de uso del panel, consulte la formación sobre Gestión de scripts; para el estado de la función según los planes, la página de planes de comercio electrónico. Si desea hablar de cómo aplicarlo en su propio sitio, puede ponerse en contacto con nuestro equipo.
Preguntas frecuentes
¿Qué es la gestión de scripts?
La gestión de scripts es el área que permite añadir desde el panel códigos HTML, CSS y jQuery a las páginas de un sitio de comercio electrónico. En Faprika se accede desde Gestión de scripts, dentro de Gestión de contenido, y se crea un área de script con «añadir nuevo».
¿Para qué sirve la gestión de scripts?
Sirve para hacer pequeñas adiciones que la plantilla no ofrece: un código de seguimiento, una ventana de chat en vivo, un botón de mensajería, un botón personalizado o una corrección de estilos. El objetivo es añadir a las páginas áreas dinámicas e interactivas.
¿Se necesitan conocimientos de programación para la gestión de scripts?
Sí. Sin conocimientos suficientes de código, las operaciones realizadas en esta área pueden causar fallos de diseño. Si no entiende el código, no lo añada; si surge un problema, puede desactivar el script o eliminar su campo.
¿Cuál es la diferencia entre header y footer?
En el campo Posición en la página, si elige header el código se coloca dentro de la etiqueta head; si elige footer, dentro de la etiqueta body, pero al final. Si la guía de la herramienta indica una posición, siga esa; si no, ponga el código en footer y, si hace falta, páselo a header.
¿Los scripts ralentizan la velocidad de la página?
Cada script supone una descarga y una ejecución adicionales; su número, tamaño y carga temprana pueden retrasar la apertura de la página. Como el efecto depende del código, conviene medir y comparar la misma página con el mismo método antes y después de añadirlo.
¿Se puede mostrar un script solo a determinados usuarios?
Sí. Con el campo Grupo de usuarios restringido puede limitar los códigos de script por grupos de usuarios; por ejemplo, puede elegir que el código no se añada para usuarios no registrados. Con el campo Idioma también puede ejecutar el código en un solo idioma o en todos.
