Get Started

Pon Clerk en funcionamiento en tu tienda de Lightspeed en solo unos pocos pasos. Esta guía te guía a través de la conexión de tu tienda, la instalación de scripts de seguimiento y la sincronización de tus datos.

Conectando tu tienda #

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

Agregar tienda #

Después de iniciar sesión en my.clerk.io, lo primero que necesitas hacer es agregar tu tienda:

1. Escribe el Name y el Domain de tu tienda online.

2. Elige Lightspeed como la Platform y selecciona tu Currency.

3. Haz clic en Add Store.

Instalar scripts de seguimiento #

El script de seguimiento de Clerk utiliza variables de Lightspeed Liquid para leer datos de la tienda como moneda y contexto de producto. Por esta razón, el script debe colocarse en un archivo de tema donde se procese Liquid.

Seguimiento de visitantes #

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

2. Bajo Snippets, haz clic en Add a new snippet, nómbralo clerk-tracking.rain y haz clic en Done.

3. Agrega el siguiente script a clerk-tracking.rain y reemplaza INSERT_PUBLIC_API_KEY con 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 agrega el siguiente include donde debe cargarse el script de seguimiento de visitantes, normalmente justo antes de cerrar la etiqueta </head>. Haz clic en Save.

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

Las páginas de carrito y agradecimiento en Lightspeed usan 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 el snippet también se incluya ahí.

6. Abre layouts > fixed.rain en el mismo Editor de temas y agrega el mismo include justo antes de cerrar la etiqueta </head>.

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

7. Haz clic en Save.

Seguimiento de pedidos #

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

2. Busca la caja de 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 la compra. Si el snippet clerk-tracking.rain está incluido en ambos archivos y los pedidos aún no se rastrean, agrega también el contenido del snippet de seguimiento de visitantes en Web Extras.

1. Ve a Settings > Website-Settings > Web Extras y busca la caja de Tracking.

2. Pega el contenido de clerk-tracking.rain inmediatamente arriba 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 los archivos de tema no rastree los pedidos. Si es necesario o no depende del tema activo de Lightspeed.

Múltiples idiomas #

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

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

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

Reemplaza el contenido de clerk-tracking.rain con el siguiente loader de seguimiento de visitantes. Reemplaza cada campo 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 en neerlandés es la opción predeterminada. Cámbiala por la Public Key del idioma predeterminado de la tienda si el neerlandés no es el idioma predeterminado. No uses ni expongas una Private Key en Rain, el código fuente de la página ni en JavaScript del navegador.

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

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

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

Verifica cada idioma #

Por cada idioma configurado:

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

2. Confirma que los elementos relevantes de Clerk.io muestran resultados desde la tienda Clerk.io de ese idioma.

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

Sincronizar datos #

Sincronizar los datos conecta tu tienda de 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.