Get Started

Pon Clerk en funcionamiento en tu tienda 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 los 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 vista previa 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 necesitas hacer es añadir tu tienda:

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

2. Elige Lightspeed como Platform y selecciona tu Currency.

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 del 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. Abre layouts > custom.rain.

3. Pega el siguiente script al final del archivo 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.

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

5. Abre layouts > fixed.rain en el mismo Editor de Temas.

6. Pega el mismo script justo antes de la etiqueta de cierre </head>.

7. Haz clic en Save.

Múltiples idiomas #

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

Configura la public key en Rain, antes de que se cargue Clerk.js. 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 fiable que cambiar claves con JavaScript del lado del cliente. Un cambio del lado del navegador puede competir con la carga de Clerk.js o inicializar Clerk.io primero con la tienda incorrecta.

Reemplaza el cargador regular de seguimiento de visitantes con el siguiente fragmento en esta configuración. 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 holandesa es el valor predeterminado. Cámbiala por la Public Key del idioma predeterminado de la tienda si el holandés no es el idioma predeterminado. No utilices ni expongas una Private Key en Rain, el código fuente de la página o JavaScript del navegador.

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

Agrega el fragmento tanto a layouts > custom.rain como a layouts > fixed.rain, inmediatamente antes de la etiqueta de cierre </head>. fixed.rain cubre la caja y otras páginas restringidas, y Clerk.js debe ejecutarse ahí para hacer el seguimiento de ventas en la página de confirmación.

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

Verifica cada idioma #

Para cada idioma configurado:

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

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

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

Seguimiento de pedidos #

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

2. Busca el recuadro 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 caja. Si Clerk.io ya está añadido a ambos archivos y los pedidos aún no se rastrean, añade también el script de seguimiento de visitantes en Web Extras.

1. Ve a Settings > Website-Settings > Web Extras y busca el recuadro de Tracking.

2. Pega el script de seguimiento de visitantes inmediatamente arriba del código de seguimiento de pedidos de Clerk.io.

3. Haz clic en Save.

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

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 proporcione recomendaciones personalizadas y resultados de búsqueda basados en los datos reales de tu tienda. Sigue los pasos en la guía de sincronización de datos para configurar la sincronización de datos.