Get Started

Pon Clerk en funcionamiento en tu tienda Lightspeed en solo unos pocos pasos. Esta guía te muestra cómo conectar tu tienda, instalar los scripts de seguimiento y sincronizar tus datos.

Conectar tu tienda #

Después de seguir estos sencillos pasos podrás ver tu Live Demo, que te ofrece una visión general personalizada de cómo funcionará Clerk en tu tienda online, antes de configurar el resto del sistema.

Añadir tienda #

Después de iniciar sesión en my.clerk.io, lo primero que debes hacer es añadir tu tienda:

1. Escribe el Nombre y el Dominio de tu tienda online.

2. Elige Lightspeed como Plataforma y selecciona tu Moneda.

3. Haz clic en Add Store.

Instalar scripts de seguimiento #

El script de seguimiento de Clerk utiliza variables Lightspeed Liquid para leer datos de la tienda como la moneda y el contexto de los productos. Por este motivo, el script debe ubicarse en un archivo de tema donde se procese Liquid.

Seguimiento de visitantes #

1. En tu backend de Lightspeed, ve a Design > Theme Editor > Advanced > Edit Code.

2. Bajo Snippets, haz clic en Add a new snippet, asígnale el nombre clerk-tracking.rain, y haz clic en Done.

3. Añade el siguiente script a clerk-tracking.rain, y reemplaza INSERT_PUBLIC_API_KEY por tu Public Key de my.clerk.io > Developers > API Keys.

<!-- Clerk.io Visitor Tracking (Lightspeed) -->
<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',
    formatters: {
      convert_currency: function(price) {
        const rate_raw = '{{ 100 | money }}'.replace(/[^0-9.]/g, '');
        const rate = parseFloat(rate_raw) ? (parseFloat(rate_raw) / 100) : 1;
        return rate * price;
      }
    },
    globals: {
      currency_iso: '{{ shop.currency2.code }}',
      currency_symbol: '{{ shop.currency2.symbol }}'
    }
  });
  // Clerk.js Context
  Clerk('context', {
    product: {% if product.id %}'{{ product.id }}'{% else %}null{% endif %},
    category: {% if collection.category_id %}'{{ collection.category_id }}'{% else %}null{% endif %},
    page: {% if product.id %}null{% else %}{% if collection.category_id %}null{% else %}'{{ template }}'{% endif %}{% endif %}
  });

  {% if page.account.email %}
  Clerk('call', 'log/email', { email: '{{ page.account.email }}' });
  {% endif %}
</script>

4. Haz clic en Save.

5. Abre layouts > custom.rain y añade el siguiente include donde el script de seguimiento de visitantes deba cargarse, normalmente justo antes de la etiqueta de cierre </head>. Haz clic en Save.

{% include 'snippets/clerk-tracking.rain' %}

Las páginas de carrito y agradecimiento en Lightspeed utilizan un archivo de tema separado llamado fixed.rain. Este archivo no hereda scripts de custom.rain, por lo que Clerk.js no se cargará en esas páginas a menos que también se incluya el snippet allí.

6. Abre layouts > fixed.rain en el mismo Theme Editor y añade el mismo include justo antes de la etiqueta de cierre </head>.

{% include 'snippets/clerk-tracking.rain' %}

7. Haz clic en Save.

Seguimiento de pedidos #

1. En tu backend de Lightspeed, ve a Settings > Website-Settings > Web Extras.

2. Encuentra el cuadro Tracking e inserta el código de seguimiento de pedidos de Clerk.

<span
  class="clerk"
  data-api="log/sale"
  data-sale="{{ order.information.number }}"
  data-email="{{ order.customer.email }}"
  data-customer="{{ order.customer.id }}"
  data-products='[{% for product in order.products %}{"id":{{ product.product_id }},"quantity":{{ product.quantity }},"price":{{ product.base_price_incl }}}{% if not loop.last %},{% endif %}{% endfor %}]'>
</span>

3. Haz clic en Save.

Si los pedidos aún no se rastrean #

Algunos temas de Lightspeed no cargan Clerk.js desde custom.rain y fixed.rain durante el proceso de compra. Si el snippet clerk-tracking.rain está incluido en ambos archivos y los pedidos aún no se rastrean, añade el contenido del snippet de seguimiento de visitantes también en Web Extras.

1. Ve a Settings > Website-Settings > Web Extras y encuentra el cuadro Tracking.

2. Pega el contenido de clerk-tracking.rain inmediatamente por encima del código de seguimiento de pedidos de Clerk.io.

3. Haz clic en Save.

Utiliza esta ubicación solo cuando la configuración estándar de archivos de tema no rastree los pedidos. Si es necesario o no, depende del tema activo de Lightspeed.

Varios idiomas #

Utiliza esta configuración cuando una tienda Lightspeed eCom (C-Series) tenga rutas de idioma como /nl/, /en/, /de/ y /fr/, y cada idioma utilice una tienda Clerk.io diferente.

Configura la clave pública en Rain, antes de que Clerk.js cargue. Lightspeed renderiza shop.language en el servidor, así que cada página recibe exactamente la clave correcta antes de que el navegador cargue Clerk.js.

Esto es más fiable que cambiar las claves usando JavaScript del lado del cliente. Un cambio desde el navegador puede competir con la carga de Clerk.js o inicializar Clerk.io primero con la tienda incorrecta.

Reemplaza el contenido de clerk-tracking.rain con el siguiente cargador de seguimiento de visitantes. Reemplaza cada marcador de posición por la Public Key correspondiente de my.clerk.io > Developers > API Keys.

{% set clerk_key = 'INSERT_NL_PUBLIC_API_KEY' %}

{% if shop.language == 'en' %}
  {% set clerk_key = 'INSERT_EN_PUBLIC_API_KEY' %}
{% elseif shop.language == 'de' %}
  {% set clerk_key = 'INSERT_DE_PUBLIC_API_KEY' %}
{% elseif shop.language == 'fr' %}
  {% set clerk_key = 'INSERT_FR_PUBLIC_API_KEY' %}
{% elseif shop.language == 'nl' %}
  {% set clerk_key = 'INSERT_NL_PUBLIC_API_KEY' %}
{% endif %}

<!-- Clerk.io Visitor Tracking (Lightspeed multilingual) -->
<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: '{{ clerk_key }}' });
</script>

La clave inicial para holandés es la de respaldo. Cámbiala por la Public Key del idioma predeterminado de la tienda si este no es el idioma de respaldo. No utilices ni expongas una Private Key en Rain, en el código fuente de la página ni en JavaScript del navegador.

shop.language es la variable de idioma activo para el visitante en Lightspeed. Consulta la referencia de variables Rain de Lightspeed y la referencia de configuración de Clerk.js de Clerk.io para las variables y configuraciones subyacentes.

Mantén el include en ambos layouts > custom.rain y layouts > fixed.rain, inmediatamente antes de la etiqueta de cierre </head>. fixed.rain cubre el checkout y otras páginas restringidas, y Clerk.js debe ejecutarse allí para el seguimiento de ventas en la página de confirmación.

Cada página debe tener solo un cargador de Clerk.js y una configuración de Clerk.io. Elimina o reemplaza cualquier configuración estática de Clerk.io en fixed.rain, custom.rain o Tracking/Web Extras. Si no, una clave estática puede configurar Clerk.io antes que la específica para el idioma.

Verifica cada idioma #

Para cada idioma configurado:

1. Abre una página en ese idioma e inspecciona el código fuente de la página renderizada. Confirma que la clave de Clerk('config') es la correspondiente Public Key específica para el idioma.

2. Confirma que los Elementos relevantes de Clerk.io cargan resultados desde la tienda Clerk.io de ese idioma.

3. Cuando el seguimiento de ventas sea relevante, realiza un pedido de prueba controlado y confirma que la venta se registre en la tienda de idioma correspondiente.

Sincronizar datos #

La sincronización de datos conecta tu tienda Lightspeed con Clerk, permitiendo que Clerk acceda a tus productos, pedidos, clientes y otra información de la tienda. Esto permite que Clerk ofrezca recomendaciones personalizadas y resultados de búsqueda basados en los datos reales de tu tienda. Sigue los pasos de la guía de sincronización de datos para configurar la sincronización de datos.