FAQ

Aplicaciones de una sola página (SPA) #

Estas también se llaman Aplicaciones Web Progresivas (PWA) y generalmente cargan el sitio como una sola página, en lugar de cargar páginas individuales como es normal.

Cuando se carga una página por primera vez, la biblioteca Clerk.js automáticamente ejecuta una función para renderizar todos los bloques de Contenido en esa página.

Sin embargo, para aplicaciones de una sola página que utilizan frameworks como vue.js o next.js, las páginas se renderizan con JavaScript en lugar de una carga de página estándar. Debido a esto, necesitas controlar el renderizado con Clerk.js para que coincida con cómo cargas las páginas en la aplicación.

Incluir Clerk.js #

Clerk.js solo necesita ser cargado una vez, cuando el sitio se carga inicialmente. Después de esto, la biblioteca estará disponible durante toda la sesión. Inclúyelo justo antes del </head> en tu HTML:

<!-- Inicio de la herramienta de personalización de comercio electrónico de Clerk.io - www.clerk.io -->
<script type="text/javascript">
    (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

    Clerk('config', {
    key: 'INSERT_PUBLIC_API_KEY'
    });
</script>
<!-- Fin de la herramienta de personalización de comercio electrónico de Clerk.io - www.clerk.io -->

Controlar el Renderizado #

Por defecto, Clerk.js renderiza cualquier elemento que tenga la clase clerk, independientemente de si se inserta durante la carga inicial de la página o cuando el DOM se muta. Puedes controlar el tiempo insertando el elemento cuando esté listo para ser renderizado.

Alternativamente, puedes controlar el renderizado con la función Clerk("content", "SELECTOR").

Cada vez que se carga una página, realiza estos pasos en orden:

• Agrega el fragmento de Clerk al HTML con un selector único que puedas dirigir.
• Ejecuta Clerk("content", "SELECTOR") para renderizarlo.

Cuando el visitante abandona la página, destruye el fragmento y renderízalo de nuevo si el visitante regresa a la misma página. Esto es para asegurar que Clerk.js no vea el fragmento como previamente renderizado, lo que causaría que no se visualice.

Ejemplo:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Clerk.js también se puede configurar para inicializar automáticamente el Contenido con tus selectores personalizados después de la primera vez que lo renderizas.

Impacto en la Velocidad de Carga #

Agregar una herramienta externa como Clerk.js aumentará el tiempo que tarda en cargarse tu sitio, pero es negligible en comparación con las conversiones adicionales que proporcionará. A continuación, puedes ver cómo impacta en el rendimiento de tu sitio.

Rendimiento #

La biblioteca Clerk.js tiene solo 37.5kb de tamaño, por lo que se carga muy rápidamente. Además, carga elementos de forma asíncrona, lo que significa que el resto de la página se carga mientras Clerk.js renderiza contenido.

Un aumento en el tiempo de carga de una página proviene más a menudo de cargar más imágenes que anteriormente, ya que los resultados de búsqueda y recomendaciones de Clerk funcionan mejor cuando son visualmente atractivos.

Para minimizar el tiempo de carga adicional, recomendamos usar imágenes en formato webp que tengan una resolución que coincida con el tamaño que tienen en los elementos de Clerk.

Por ejemplo, si las imágenes en las recomendaciones tienen una resolución de 400x400px en vista de escritorio, envía imágenes con una resolución máxima de 420x420px o similar.

Google Page Speed #

Si usas Google Page Speed Insights o una herramienta similar para analizar el rendimiento de tu sitio, podrías ver Clerk.js listado bajo Aprovechar la caché del navegador.

El propósito de Clerk.js es hacer que sea muy simple insertar resultados de Clerk.io en cualquier sitio web. Clerk.js contiene muchas características para manejar el seguimiento y componentes de UI como Búsqueda Instantánea, deslizadores, ventanas emergentes y más.

Cuando agregamos nuevas características de UI o hacemos mejoras a las existentes, se incluyen en Clerk.js y deben ser descargadas por el usuario final para poder usarlas.

Tener una expiración de caché de 60 minutos significa que cuando lanzamos nuevas características estarán disponibles para todos dentro de un máximo de 60 minutos. Cuanto más largo sea el tiempo de caché, más tiempo llevará a todos tener acceso a las características más nuevas.

Lo importante es que los usuarios finales solo tienen que descargar Clerk.js una vez cuando las nuevas características están disponibles.

La expiración de caché de 60 minutos simplemente significa que el navegador del usuario final verificará con Clerk.io cada 60 minutos. Si no se han realizado cambios en Clerk.js, no se descargará nada.

El tiempo de expiración de caché de 60 minutos es, por lo tanto, un compromiso entre minimizar las solicitudes web y filtrar nuevas características y mejoras. La mayoría de las sesiones son más cortas que 60 minutos, por lo que la solicitud solo se realizará una vez por sesión.

Como puedes ver en la captura de pantalla, esta es una práctica normal que (así como Clerk.io) es utilizada por Google Analytics, Facebook, Trustpilot y muchos otros.

Impacto de CLS #

El Desplazamiento Acumulativo de Diseño (CLS) puede afectar negativamente al SEO y a la experiencia del usuario cuando el contenido inyectado dinámicamente desplaza elementos en una página. En algunos casos, entre otros factores, Clerk puede contribuir a la puntuación de CLS. Puedes leer más sobre CLS aquí.

Sigue esta guía solo en caso de que tu puntuación de CLS sea superior a 0.2 y los elementos de Clerk estén por encima de la línea de pliegue.

Para evitar que el contenido se desplace, es necesario reservar un marcador de posición para las recomendaciones de Clerk antes de que Clerk.js las inyecte. Para hacerlo, necesitamos agregar una altura mínima basada en la altura esperada del contenido.

Ejemplo de código:

.clerk-slider-wrapper {
    min-height: 300px; /* Ajustar según la altura esperada del contenido */
    width: 100%;
}

Realizando llamadas a la API #

Puedes usar Clerk.js para realizar llamadas a la API, utilizando la función incorporada Clerk("call").

Esta función toma 3 argumentos:

• Un endpoint de API
• Un diccionario JSON de parámetros
• Una función de callback para manejar la respuesta

Solicitudes #

A continuación se muestra un script de ejemplo que solicita los 10 productos más populares y registra la respuesta en la consola. La respuesta contiene un objeto JavaScript con el estado de la llamada a la API y el resultado.

Script #

function popularProducts(){
  Clerk("call",
    "recommendations/popular",
    {
      limit: 10,
      labels:["Página de inicio / Más vendidos"]
    },
    function(response){
      console.log(response);
    },
    function(response){
      console.error(response);
    }
  );
}

Respuesta #

__clerk_cb_1(
  {
   "status":"ok",
   "count":72,
   "facets":null,
   "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Callbacks #

Cuando realizas llamadas a la API, puedes usar funciones de callback para manejar la respuesta como mejor te parezca. Las funciones toman response como argumento, que contiene todos los datos devueltos por la API.

A continuación se muestra un ejemplo que crea una lista de elementos HTML que enlazan a categorías que coinciden con la consulta “hombres”.

Clerk("call",
  "search/categories",
  {
      'query': "hombres",
      'limit': "10"
  },
  function(response) {
      var cat = response.categories;
      if (cat.length > 0) {
          let heading = document.createElement('h3');
          heading.textContent = 'Categorías Relacionadas';
          document.querySelector('#your-target').append(heading);
      }
      for (var index in cat) {
          var clerkName = cat[index].name;
          var clerkUrl = cat[index].url;
          let link = document.createElement('a');
          link.href = clerkUrl;
          link.textContent = clerkName;
          document.querySelector('#your-target').append(link);
      }
  }
)

Botones de Añadir al Carrito #

Estos botones funcionan de manera diferente para cada plataforma y la funcionalidad puede cambiar dependiendo de los plugins que uses. Debido a que los diseños de Clerk consisten en HTML & CSS, generalmente puedes agregar esta funcionalidad si entiendes cómo funciona en tu sitio.

Enfoque General #

Algunos botones de añadir al carrito requieren que se ejecute Javascript para que funcionen. En estos casos, puedes agregar la funcionalidad al método cart existente de Clerk. Consulta cómo hacer esto en nuestra documentación para desarrolladores aquí.

Inspecciona el botón de añadir al carrito para identificar el código asociado con él, por ejemplo, en una página de categoría. El código generalmente será un <div> o un elemento button. Copia todo el HTML del botón.

Copia y pega este código en tu Diseño. Ahora necesitas identificar las variables en el código. La mayoría de las veces, necesitas encontrar dónde el código usa:

• ID del producto
• Cantidad del producto

Reemplaza los valores para el ID del producto con las variables Liquid para estos puntos de datos. El ID siempre será {{ product.id }} y la cantidad variará dependiendo de cómo estés enviando los datos. Para este ejemplo podría ser {{ product.qty }}.

Pega tu código en el HTML de tu Diseño y pruébalo para asegurarte de que funcione.

Ejemplo #

El botón de añadir al carrito a continuación es un <div> que tiene la clase button-container:

La cantidad se encuentra dentro del enlace del carrito después de /cart?add= y el ID del producto se encuentra justo después de &id_product=.

El ID del producto también se referencia en data-id-product, y la cantidad del producto se referencia en .data-minimal_quantity.

Estos valores deben ser reemplazados con etiquetas Liquid en el Diseño para que se utilicen los IDs y cantidades de productos apropiados en la salida HTML.

Con estos cambios, el botón final de añadir al carrito se verá así:

<div class="button-container">
  <a 
    class="button ajax_add_to_cart_button btn btn-default" 
    style="position: relative;" 
    href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" 
    rel="nofollow" 
    title="Añadir al Carrito" 
    data-id-product-attribute="0" 
    data-id-product="{{ product.id }}" 
    data-minimal_quantity="{{ product.qty }}">
    <span style="color: orange !important">
      <i class="icon-shopping-cart" aria-hidden="true"></i>
    </span>
  </a>
</div>

Errores comunes en la consola #

Clerk.js registra muchos errores en la consola, que puedes usar para depurar problemas.

Al hacer clic en el enlace de error obtendrás más información sobre lo que salió mal, que puedes usar para depurar el error tú mismo, o para enviar a nuestro equipo de soporte que te ayudará. A continuación encontrarás una lista de los errores más comunes.

LogicalError: Contenido desconocido #

Este error se mostrará si el fragmento que insertaste está haciendo referencia a un Contenido que no existe, en el atributo data-template.

Para solucionarlo, asegúrate de que el nombre en el código embebido coincida con un bloque de Contenido que hayas creado en my.clerk.io.

Puedes hacer clic en Editar Contenido para cualquier Contenido, para ver cuál debería ser la referencia.

AuthenticationError: Endpoint de API inválido #

Este error ocurre si has utilizado la clase clerk en tu HTML en algún lugar. Esta clase está reservada para su uso con nuestros fragmentos, ya que Clerk.js utiliza esta clase para identificar los elementos a renderizar.

Para solucionarlo, asegúrate de nombrar la clase de otra manera, como clerk-product.

ParsingError: Tipo de argumento de producto inválido #

Este error significa que el ID proporcionado para un producto tiene un tipo o sintaxis incorrecta.

Por ejemplo, si tus IDs de producto son enteros, también deben serlo en el código embebido. Además, recuerda los corchetes alrededor del ID, para convertirlo en una lista.

<span 
  class="clerk" 
  data-template="@product-page" 
  data-products="[123]">
</span>

ParsingError: Tipo de argumento de categoría inválido #

Este error significa que el ID proporcionado para una categoría tiene un tipo o sintaxis incorrecta.

En la mayoría de los casos, ocurre si el marcador de posición en el código embebido de la categoría no ha sido reemplazado por un ID real:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="INSERT_CATEGORY_ID">
</span>

La salida del código debería contener el ID de la categoría:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="257">
</span>

Si copiaste el fragmento manualmente, asegúrate de seleccionar tu sistema de tienda en el Elige tu plataforma desplegable antes de copiar el fragmento. Entonces cambiará para incluir la lógica de tu plataforma para seleccionar el ID de categoría correcto.

Si tu plataforma no está listada, necesitas agregar manualmente la lógica para seleccionar el ID de categoría correcto basado en la funcionalidad de tu tienda en línea.

AuthenticationError: Clave API pública incorrecta #

Este error se mostrará si la clave API pública que has proporcionado no coincide con ninguna cuenta en Clerk.io.

Para solucionarlo, inicia sesión en my.clerk.io, y ve a Configuración > Claves API. Aquí puedes encontrar la Clave API Pública que luego puedes agregar a tu script de seguimiento de Clerk.js ya sea directamente en el código, o en la configuración de tu integración, dependiendo de tu plataforma.

Enviando datos de ventas desde un sistema POS/ERP #

Para algunas tiendas en línea, es relevante subir datos de ventas desde otros sistemas que no sean la tienda en línea real, por ejemplo, si deseas optimizar el algoritmo basado en ventas de una tienda física, o tienda B2B.

Clerk.io no diferencia entre pedidos de varias fuentes - siempre que puedas proporcionar un ID, una marca de tiempo y una lista de productos que fueron comprados, pueden ser subidos a Clerk.io.

El enfoque recomendado es usar la API CRUD ya que eso te permite automatizar la tarea por completo. Al implementar estas llamadas a la API, puedes enviar datos de pedidos directamente a tu Tienda en Clerk.io.

Simplemente crea una llamada POST al endpoint /orders en tu sistema ERP o tienda en línea, ejecuta el trabajo a intervalos regulares, por ejemplo, una vez al mes, y podrás usar pedidos fuera de línea para impulsar tus recomendaciones y resultados de búsqueda en línea.

Alternativamente, puedes subir un archivo CSV manualmente, sin necesidad de codificar nada. Puedes leer más sobre archivos CSV aquí.

Conversión de moneda #

Hay múltiples formas de trabajar con la conversión de moneda en Clerk.io. Una forma simple de hacerlo es la siguiente.

Enviar Objetos de Precio #

Clerk necesita conocer los precios de cada producto en las diferentes monedas. La forma más fácil de hacer esto es enviarlos como un objeto JSON codificado en cadena de precios formateados, con el ISO de la moneda como su clave, en tu Feed de Datos.

"products": [
  {
    "id": 1,
    "name": "Queso",
    "description": "Un buen trozo de queso.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    // Ejemplo de JSON codificado en cadena
    "prices_formatted": '{"USD":"$100", "EUR":"€87.70", "GBP":"£68.68"}' 
  },
  {
    "id": 2,
    "name": "Una libra de nueces",
    "description": "¡Eso es un montón de nueces!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    // Ejemplo de JSON codificado en cadena
    "prices_formatted": '{"USD":"$150", "EUR":"€142", "GBP":"£120"}' 
  }
]

Crear un Formateador #

En Clerk.js puedes definir funciones de JavaScript, que pueden ser usadas con tus Diseños.

Aquí puedes definir una función que toma tu diccionario de precios como argumento, y devuelve el precio para una moneda específica, basado en la lógica del frontend que elijas.

Asegúrate de reemplazar currency con la moneda actualmente elegida desde el frontend.

Clerk('config', {
  key: 'Your_API_Key',
  formatters: {
      currency_selector: function (price_list) {
      const currency = "EUR";
      price_groups_obj = JSON.parse(price_list)
        return price_groups_obj[currency];
      }
  }
});

Usar el Formateador #

Después de definir el formateador, puede ser utilizado en tu diseño con la siguiente sintaxis:

<div class="price">
   <span class="price">
      {{ product.prices_formatted | currency_selector }}
   </span>
</div>

Precios específicos para clientes #

Para mostrar precios completamente únicos basados en qué cliente ha iniciado sesión, crea un Evento en Clerk.io que inserte el precio correcto antes de que los productos sean renderizados.

Eventos son funciones de Javascript que se ejecutan antes o después de que Clerk.io muestra productos.

Este método es posible de usar si puedes buscar precios desde tu servidor, directamente desde una función de Javascript, en el frontend basada en un ID de producto y un ID de cliente.

Para mostrar precios individuales para clientes, el código debe ejecutarse justo después de la respuesta.

A continuación se muestra un ejemplo de un evento simple.

<span class="clerk" data-template="@home-page-popular"></span>

<script>
  Clerk('on', 'response', function(content, data) {
     console.log(data.result);
  });
</script>

La función toma el argumento data que es toda la respuesta que Clerk.io envía de vuelta desde la API.

Precios Individuales para Clientes #

Si necesitas mostrar precios completamente únicos basados en qué cliente ha iniciado sesión, necesitas configurar un Evento que inserte el precio correcto después de que los productos sean renderizados.

Los eventos son funciones de Javascript que se ejecutan antes o después de que Clerk.io muestra productos.

Este enfoque asume que puedes buscar precios desde tu servidor con una llamada AJAX en el frontend basada en, por ejemplo, un ID de producto y un ID de cliente.

La mejor manera es primero crear un contenedor de precio de marcador de posición en tu diseño, y luego reemplazarlo con el precio devuelto de tu llamada AJAX.

Un ejemplo:

<div class="clerk-price-container">
   <span class="clerk-price">
      Cargando precio...
   </span>
</div>

Luego puedes usar el evento de Clerk para esperar a que los productos sean renderizados, hacer una solicitud a tu servidor de precios usando el ID del producto y el ID del cliente, antes de reemplazarlo en el HTML.

Aquí hay un ejemplo de cómo hacerlo:

<script>
  var customer_id = INSERT_CUSTOMER_ID;
  Clerk("on", "rendered", function(content, data){
    for (i = 0; i < data.product_data.length; i++) {
        var product = data.product_data[i];
          var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
          let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
          price_container.innerText = custom_price;
      }
  })
  </script>

El código anterior asume que puedes identificar a un cliente que ha iniciado sesión con INSERT_CUSTOMER_ID y que tienes una función como FETCH_PRICE_FROM_SERVER que devuelve el precio del producto basado en el cliente.

price_container se utiliza para dirigirse al producto correcto basado en el ID que está disponible en data-clerk-product-id, que se agrega a todos los productos por Clerk.js.

Finalmente reemplaza el texto interno, “Cargando precio…” en este ejemplo, con el precio devuelto de tu llamada AJAX.

Precios de Grupo de Clientes #

La configuración de precios de grupo de clientes consiste en 4 pasos:

1. Incluir los diversos precios en el feed de datos
2. Incluir una variable que obtenga el actual ID de grupo de clientes
3. Crear una función para obtener el precio relevante
4. Mostrar el precio en el Diseño

Incluir Objetos de Precio #

Comienza agregando un atributo a todos los productos que contenga todas las varias opciones de precios, asegurándote de correlacionar cada precio a un grupo de clientes particular.

Esto debe ser enviado como un objeto JSON codificado en cadena. Por ejemplo:

"customer_group_prices": "{\"GROUP1\":100,\"GROUP2\":202,\"GROUP3\":309}"

Variable de ID de Cliente #

Agrega una variable global dinámica a Clerk.js que obtenga el ID de grupo de clientes del cliente actual y lo agregue como valor.

El valor del ID de Grupo de Clientes debe ser equivalente a la clave de su precio correspondiente en el Feed de Datos. Por ejemplo, un usuario que debería ver el precio para el grupo 2, entonces el ID debería ser “GROUP2”.

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  }
});

Obtener Precio #

Ahora puedes crear un Formateador, que toma el customer_group como argumento y devuelve el precio relevante.

Haz esto escribiendo una función que obtenga el precio del grupo de clientes específico como la clave en el diccionario de precios basado en el ID de customer_group.

Agrega esto en la configuración de Clerk.js. A continuación se muestra un ejemplo llamado getPrice:

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  },
  formatters: {
    getPrice: function (product) {
      const gid = window.Clerk._config.globals.customer_group;
      if (product.customer_group_prices) {
        const map = JSON.parse(product.customer_group_prices);
        if (map[gid]) {
            return map[gid];
        } else {
            return product.price;
        }
    } else {
        return product.price;
    }
    }
  }
});

Mostrar Precio #

Cuando el formateador final_price ha sido creado, puedes nombrarlo directamente en tu Diseño, junto con la lista de customer_group_prices que creaste en el paso 1:

<li style="text-align: center; width: 180px;">
	<a href="{{ product.url }}">
		<img sre="{{ product.image }}" />
		{{ product.name }}
	</a>
	<div class="price">
		{{ product | getPrice }}
	</div>
</li>

Sincronización de Autenticación HTTP #

A menudo se utiliza la autenticación HTTP en sitios de staging para evitar visitantes no deseados.

Esto, en muchos casos, bloqueará al importador de Clerk y típicamente mostrará un error 401 No Autorizado en el registro de sincronización.

Puedes verificar fácilmente el importador insertando la información de autenticación en la URL de importación como a continuación, en Sincronización de Datos en my.clerk.io:

http://USER:PASS@www.ewoksRus.com/JSONFEED

Sin Pedidos Rastreables #

Clerk.io necesita rastrear continuamente las ventas de la tienda en línea para mantener los resultados actualizados con el comportamiento de tus clientes. Sin embargo, algunas configuraciones en una tienda en línea pueden causar que el rastreo de ventas falle.

A continuación, puedes descubrir cómo depurar el rastreo de ventas cuando usas una configuración de Clerk.js y ver cuáles son los problemas y soluciones más comunes.

Antes de comenzar #

Asegúrate de que has instalado:

• El script de seguimiento de Clerk.js en todas las páginas
• El script de rastreo de ventas en tu Página de Éxito de Pedido.

Estos son necesarios para rastrear ventas en general cuando usas una configuración de Clerk.js.

Verificar Registros #

En la mayoría de los casos, el rastreo de ventas falla debido a errores en los IDs de visitante o IDs de producto de la llamada de venta que se envía a Clerk después de que se ha completado una compra. Para depurar esto, tendrás que hacer un pedido de prueba.

Sin embargo, en algunos casos podría estar relacionado con el script de rastreo de ventas en sí y puede depurarse mirando los registros en my.clerk.io > Datos > Registros.

Si el rastreo de ventas está fallando debido a un error en tu script, a menudo podrás ver el error en esta página. Haz clic en Detalles para ver más.

Si no puedes ver ningún error en los registros, la forma más fácil de identificar otros problemas de rastreo de ventas es realizar un pedido de prueba.

Depuración de Pedido de Prueba #

En este ejemplo, usamos Chrome para mostrar cómo depurar el rastreo de ventas con un pedido de prueba, pero otros navegadores tienen características similares.

1. En tu tienda en línea, agrega un par de productos al carrito.
2. Procede a Pagar.
3. Antes de realizar el pedido, abre la Consola de tu navegador.
4. Encuentra Red, y busca " clerk".
5. Realiza el pedido, para que veas la página de confirmación del pedido.
6. Haz clic en la llamada que comienza con sale (normalmente sale?key=…).

Aquí verás los datos que se envían y reciben por el endpoint de la API de rastreo de ventas. Haz clic en Vista Previa para identificar cualquier error que pueda causar que las ventas no sean rastreadas.

A continuación se presentan errores comunes asociados con el rastreo de ventas.

Sintaxis Inválida en el Argumento: productos #

Este error ocurre si los IDs de producto que envías tienen una sintaxis incorrecta. Los errores más comunes son:

• Los IDs de producto están codificados en cadena en el rastreo de ventas, pero estás usando Enteros en Clerk.io o viceversa.
• La lista de IDs de producto contiene caracteres de formato de texto en lugar de JSON puro: "products":\[\\"id"\\:\\"123-m"\\\].

Falta el Argumento X #

Esto significa que no estás enviando todos los datos que Clerk.io necesita para rastrear la venta.

Asegúrate de incluir todos los atributos de datos necesarios en el rastreo de ventas.

No se Realizó Llamada #

Si no puedes ver la llamada a sale incluso con ambos scripts instalados, entonces algo ha causado que el script de Clerk.js se cargue incorrectamente. Prueba esto siguiendo estos pasos:

1. Abre la Consola en tu navegador
2. Escribe “Clerk”.
3. Si Clerk.js no se ha cargado correctamente, verás un ReferenceError:

Uncaught ReferenceError: Clerk is not defined

Si este es el caso, necesitas verificar tu configuración de Clerk.js:

• Asegúrate de que Clerk.js esté instalado en todas las páginas.
• Asegúrate de que no esté bloqueado por otra funcionalidad de Javascript.

Sin Impacto de Clerk #

Si rastreas ventas con éxito en my.clerk.io, pero ninguna de ellas aparece como impactada por Clerk.io, podrías tener un error en tu configuración de rastreo de visitantes / rastreo de clics.

Comienza asegurándote de que el rastreo de visitantes funcione, haciendo lo siguiente:

1. Haz clic en cualquier producto a través de la Búsqueda o Recomendaciones de Clerk.io
2. Procede a realizar un pedido que contenga este producto
3. Inicia sesión en my.clerk.io y ve a Detalles del Pedido
4. Espera a que el Pedido aparezca.

Si el rastreo de visitantes está funcionando, verás el valor y el impacto del producto que agregaste a través de Clerk.io, en Pedidos Rastreables:

Si no ves ningún valor añadido en el pedido que realizaste, las siguientes secciones muestran errores comunes que podrían causar esto.

Configuraciones de API #

Si configuraste Clerk.io con una integración personalizada directamente con la API, necesitas habilitar activamente el rastreo de visitantes. Lee cómo hacerlo en este artículo de API.

IDs de Producto Incorrectos #

Para que el rastreo de visitantes funcione, el rastreo de clics y ventas debe rastrear los mismos IDs de producto que los que recibimos en el importador. Usualmente, si esto no funciona es porque estás rastreo de IDs de variante en lugar de IDs padre o el SKU en lugar del ID.

Para verificar si este es el problema, haz lo siguiente:

1. En my.clerk.io, ve a Datos > Pedidos y haz clic en el ID de un pedido que realizaste.
2. Si Clerk.io no puede identificar el producto, verás un ID y un marcador de imagen:
3. Ve a Datos > Productos y busca el nombre del producto que agregaste. Aquí podrás ver el ID esperado para el producto.

Usa esto para configurar tu rastreo de ventas para usar los IDs de producto correctos.

Cambios en el ID de Visitante #

Clerk.io utiliza un ID de visitante para identificar cada sesión individual, incluyendo los productos que hacen clic y compran. Debido a esto, los IDs deben permanecer iguales durante al menos toda la sesión, y preferiblemente a través de múltiples sesiones también.

Este ID de visitante se crea automáticamente al usar Clerk.js para hacer la configuración, pero si usas una configuración de API, o personalizas tus IDs de visitante, podrías cambiarlo accidentalmente.

Este error es raro, pero puedes verificar el ID de visitante siguiendo estos pasos:

1. Abre la configuración de Red en el navegador, y reduce los resultados a “clerk”.
2. Comienza revisando cualquiera de las llamadas undefined que están relacionadas con la búsqueda o recomendaciones.
3. En payload puedes verificar el actual ID de Visitante. Podrás hacer esto para todas las llamadas asociadas con Clerk.io
4. Procede a hacer clic en el producto, y realiza un pedido con este producto.
5. En la Página de Éxito del Pedido, verifica tu Red nuevamente, y encuentra la llamada a sale?.
6. Asegúrate de que visitor en el payload, coincida con el ID de Visitante que viste en el paso 3.

Si los IDs de visitor no coinciden, necesitas averiguar por qué cambian. Una causa común para que los IDs de visitante cambien podría ser si regeneras los IDs para cada nueva página que se carga. Actualiza tu código para usar el mismo ID de visitante para cada página.

Actualizar a Clerk.js 2 #

Clerk.js 2 es una versión más rápida y mucho más flexible de nuestra biblioteca de JavaScript que facilita la instalación de Clerk.io en cualquier tienda en línea.

Sin embargo, dado que las dos versiones funcionan de manera ligeramente diferente, necesitas seguir estos pasos para actualizar con éxito.

Las dos principales diferencias en Clerk.js 2 son:

• Los Diseños en my.clerk.io utilizan el Liquid, pero también pueden ser creados fácilmente usando el Editor de Diseño.

• El script debe ser insertado justo antes del en la plantilla de tu tienda en línea.

Crear Diseños #

Dado que Clerk.js 2 tiene un enfoque diferente para los Diseños, necesitas crear nuevos.

Puedes crear tus Diseños de Clerk.js 2 ya sea rehaciendo en el Editor de Diseño, o convirtiendo tu antiguo código de Diseños a Liquid, que la guía a continuación explica cómo hacerlo.

A continuación se presenta una descripción de cómo convertir tus antiguos diseños de código a Liquid.

Opción 1: Diseños del Editor de Diseño #

1. Ve a my.clerk.io > Recommendations/Search > Designs > New Design.
2. Selecciona un tipo de diseño diferente a Blank y dale un nombre. Recomendamos agregar “V2” para que sea obvio que estás utilizando diseños de Clerk.js 2 para esto.
3. En el Editor de Diseño, haz clic en cualquiera de los elementos existentes como el nombre, imagen, botón, etc. para editarlo, o agrega nuevos elementos al Diseño.
4. Haz clic en Publicar Diseño cuando hayas terminado, y ve al Paso 2 en la guía.
5. Por último, ve a Recommendations/Search > Content y cambia tu contenido de Clerk.io para usar tu nuevo Diseño, luego haz clic en Update Content.
6. Esto hará que temporalmente no aparezcan en tu tienda en línea, hasta que hayas insertado Clerk.js 2 como se describe más adelante en esta guía.

Opción 2: Convertir Diseños #

Dado que Clerk.js 2 utiliza el lenguaje de plantillas Liquid más flexible, necesitas convertir los Diseños a este lenguaje.

1. Comienza yendo a my.clerk.io >Recommendations/Search > Designs > New Design.
2. Selecciona Blank > Code y dale un nombre. Recomendamos agregar “V2” para que sea obvio que estás utilizando diseños de Clerk.js 2 para esto.
3. Haz clic en Crear Diseño.
4. Esto te dará un diseño en blanco con HTML y CSS de Producto que puedes usar.
5. Regresa a la vista general del diseño y haz clic en Editar Diseño para tu Diseño de Clerk.js 1. Recomendamos hacer esto en una nueva pestaña para que puedas copiar el código fácilmente.
6. Ahora necesitas copiar el antiguo Diseño de Clerk.js 1 a tu nuevo Diseño de Clerk.js 2.
   • Notarás que no hay Código de Contenedor en el nuevo.
   • Esto se debe a que Liquid utiliza bucles for para renderizar todos los productos.
   • Copia tu antiguo HTML de Producto dentro del bucle for, tu antiguo Código de Contenedor alrededor de él y copia también el CSS.
7. Convierte el Diseño a la sintaxis de Liquid. La principal diferencia es que los antiguos Diseños usaban la sintaxis {{ formatter attribute }} mientras que la sintaxis de v2 es {{ product.attribute | formatter }}.
8. Revisa todos tus atributos y cámbialos al nuevo formato.
9. Si estás utilizando declaraciones {{#if}} o {{#is}}, estas también necesitan ser convertidas. Usa la sintaxis {% if product.attribute %} {% else %} {% endif %}.
10. Elimina id="{{ $id }}" y la clase :target del código del contenedor en la versión de Clerk.js 2 ya que ya no son compatibles.
11. A continuación se muestra un ejemplo de un diseño de Clerk.js 1, y la versión completamente convertida:

Diseño de Clerk.js 1 #

// HTML de Producto
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Precio {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Precio {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Precio {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Comprar Ahora</div>
</li>

// Código de Contenedor
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- Este código crea el slider por su ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>

Diseño de Clerk.js 2 #

<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Precio {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Precio {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Precio {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Comprar Ahora</div>
        </a>
    </li>
    {% endfor %}
</ul>

13. Ahora haz clic en Actualizar Diseño para guardar los cambios.
14. Por último, ve a Recommendations/Search > Content y cambia tu bloque de Contenido para usar tu nuevo Diseño.
15. Haz clic en Actualizar Contenido. Esto hará que temporalmente no aparezcan en tu tienda en línea, hasta que termines con Paso 2. Elige el nuevo Diseño para todo el Contenido que deba ser actualizado.

Reemplazar el script #

1. Comienza localizando el archivo de plantilla que se utiliza para mostrar todas las páginas de la tienda en línea, y donde se encuentra el script original de Clerk.js cerca de la parte inferior.
2. Elimina el antiguo script de Clerk.js del archivo. Se verá algo así:

<!-- Inicio de la herramienta de personalización de E-commerce de Clerk.io - www.clerk.io -->
<script type="text/javascript">
    window.clerkAsyncInit = function() {
        Clerk.config({
            key: 'public_api_key'
        });
    };
    (function(){
        var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
        e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    })();
</script>
<!-- Fin de la herramienta de personalización de E-commerce de Clerk.io - www.clerk.io -->

3. Ve a my.clerk.io > Settings > Tracking Code. Esto contiene el código de Clerk.js 2.
4. Copia este código, insértalo justo antes de la etiqueta </head> en la plantilla, luego guárdalo.

¡Felicidades! Ahora estás utilizando la configuración mejorada de Clerk.js 2. Puedes ver la documentación completa de Clerk.js 2 aquí.

Manejo de require.js #

Esta sección solo se aplica cuando se utiliza Clerk.js 1.

En algunas configuraciones, Require.js impide que Clerk.js se cargue, lo que significa que no se mostrarán sliders ni resultados de búsqueda. Cuando esto sucede, se mostrará el siguiente error en tu consola:

Uncaught ReferenceError: Clerk is not defined

Hay dos formas de manejar Require.js. Ambos enfoques requieren que realices cambios en el script de seguimiento, que has insertado en la parte inferior de todas las páginas.

Incluir “clerk” en Require.js #

El mejor enfoque es intentar hacer que Require.js reconozca Clerk.io.

Puedes hacer esto insertando require(\['clerk'\], function() {}); en la parte inferior del script de seguimiento:

Ignorar Require.js #

Si la solución anterior no funciona, es posible ignorar Require.js.

Puedes hacer esto insertando window.__clerk_ignore_requirejs = true; en la parte superior del script de seguimiento:

Después de usar uno de estos enfoques, Require.js ahora será compatible con Clerk.io.