Shopify

Get Started

Instala Clerk en Shopify siguiendo estos sencillos pasos

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

Conectar tu tienda #

El primer paso para instalar Clerk es conectar tu tienda con tu cuenta de Clerk.

El siguiente video te muestra qué hacer, paso a paso. Usa el resto de la guía como referencia.

Después de seguir estos sencillos pasos, podrás ver tu Live Demo Store, que te dará una visión general personal de cómo funcionará Clerk en tu tienda online.

Añadir tienda #

  1. Inicia sesión en my.clerk.io. La primera vez que lo hagas, verás la página de Add New Store.

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

  3. Elige Shopify como la Plataforma y selecciona tu Moneda.

  4. Haz clic en Add Store.

Instalar el seguimiento de visitantes #

  1. En el backend de Shopify, ve a Online Store > Themes.

  2. Haz clic en ... > Edit code para el tema que deseas modificar.

  3. Abre settings_schema.json y añade el fragmento de configuración de Clerk al final, justo antes del último ].

Settings schema file
,
{
  "name": "Clerk settings",
  "settings": [
    {
      "type": "header",
      "content": "Clerk"
    },
    {
      "type": "checkbox",
      "id": "enable_clerk",
      "label": "Enable Clerk",
      "default": true
    }
  ]
}

  1. Haz clic en Save.

  2. Bajo Snippets, haz clic en Add a new snippet llamado clerk-tracking.liquid y haz clic en Done.

  3. Inserta tu fragmento de seguimiento de visitantes de Clerk en el nuevo archivo y haz clic en Save. Reemplaza INSERT_PUBLIC_API_KEY con tu Public Key de my.clerk.io > Developers > API Keys.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function (w, d) {
    var e = d.createElement('script'); e.type = 'text/javascript'; e.async = true;
    e.src = (d.location.protocol == 'https:' ? 'https' : 'http') + '://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);
  let publicKey = 'INSERT_PUBLIC_API_KEY';
  Clerk('config', {
    key: publicKey,
    formatters: {
      currency_converter: function (price) {
        var converted_price = (price * Shopify.currency.rate);
        return (converted_price).toString();
      }
    },
    globals: {
      currency_iso: "{{ cart.currency.iso_code }}",
      currency_symbol: "{{ cart.currency.symbol }}"
    }
  });

  {% if customer %}
    Clerk('call', 'log/email', { email: "{{ customer.email }}" });
  {% endif %}

  document.addEventListener('DOMContentLoaded', (e) => {
    (async function fetchVisitorId() {
      let visitorId = window.sessionStorage.getItem('visitor_id');
      try {
        if (!visitorId) {
          const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
          const data = await response.json();
          visitorId = data.visitor;
          window.sessionStorage.setItem('visitor_id', data.visitor);
        }
        Clerk('config', {
          visitor: visitorId,
        });
      } catch (error) {
        console.error('Error:', error);
      } finally {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  1. Abre theme.liquid y añade esto justo antes de </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Instalar el seguimiento de pedidos #

  1. En Shopify, ve a Settings > Customer Events.

  2. Haz clic en Add custom pixel, asígnale el nombre Clerk.io y luego haz clic en Add pixel.

  3. Pega tu código de Clerk Sales Tracking y haz clic en Save.

analytics.subscribe("clerk_pixel_context", (event) => {
  browser.localStorage.setItem("clerkPixelContext", JSON.stringify(event.customData));
});

analytics.subscribe("checkout_completed", async (event) => {
  const pixelContextRaw = await browser.localStorage.getItem("clerkPixelContext");
  const pixelContext = await JSON.parse(pixelContextRaw);
  const checkout = event.data.checkout;
  fetch(`https://api.clerk.io/v2/log/sale/shopify`, {
    method: "POST",
    mode: "cors",
    body: JSON.stringify({
      sale: checkout.order.id,
      key: pixelContext.localeApiKey,
      visitor: pixelContext.visitor,
    }),
  });
});
  1. Haz clic en Connect y confirma.
Insert pixel tracking

Sincronizar datos #

La sincronización de datos conecta tu tienda de Shopify 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.

Varios dominios/idiomas #

La forma más sencilla de implementar Clerk en varios dominios en configuraciones estándar es creando una Store separada para cada dominio en my.clerk.io y sincronizándolas con cada uno de tus dominios de idioma de Shopify.

Esto te permite separar productos, ventas, monedas, etc., para hacer seguimiento individual de cada dominio.

Configuración de Stores #

  1. Comienza creando tu Store principal y sigue la Guía de Configuración para conectar tu Store a Clerk. Elige las Recommendations y/o Search que deseas mostrar en tu tienda online.

  2. Una vez que hayas completado la configuración inicial, haz clic en "+ Add new Store", la última opción en la lista desplegable (generalmente debajo de tus Store(s) existentes y el nombre de la empresa):

Add new store dropdown

  1. En la página Add New Store, introduce los datos de tu dominio.

  2. Haz clic en Copy from existing Store? y selecciona la Store de la que quieres copiar elementos. Luego haz clic en Add Store. Esto transferirá los Elements y Designs de tu Store principal.

  3. Sigue nuevamente la Guía de Configuración para activar Clerk haciendo clic en Settings > Setup Guides para Sync Data del nuevo dominio.

  4. Una vez que la Data Sync esté completa, tu dominio estará listo y usando la misma configuración que tu Store principal.

  5. Repite este proceso para cada uno de tus dominios por idioma en Shopify.

  6. Finalmente, modifica el script de seguimiento en el tema de tu Shopify para incluir la clave pública correcta para cada dominio.

Aquí tienes un ejemplo de script de seguimiento modificado para incluir varios idiomas:

<!-- Start of Clerk.io E-commerce Personalisation tool - 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);

  document.addEventListener("DOMContentLoaded", (e) => {
    let publicKey;
    switch (Shopify.locale) {
      case 'nl':
        publicKey = 'KEY';
        break;
      case 'en':
        publicKey = 'KEY';
        break;
      case 'es':
        publicKey = 'KEY';
        break;
      case 'it':
        publicKey = 'KEY';
        break;
      case 'fr':
        publicKey = 'KEY';
        break;
      case 'de':
        publicKey = 'KEY';
        break;
    }

    Clerk("config", {
      key: publicKey,
      formatters: {
        currency_converter: function (price) {
          var converted_price = (price * Shopify.currency.rate);
          return (converted_price).toString();
        }
      },
      globals: {
        currency_iso: "{{ cart.currency.iso_code }}",
        currency_symbol: "{{ cart.currency.symbol }}",
        clerkShopLocale: "{{ shop.locale }}",
        template_name: "{{ template.name }}",
        clerkCountry: "{{ routes.root_url }}"
      }
    });

    ; (async function fetchVisitorId() {
      let visitorId = window.sessionStorage.getItem('visitor_id');
      try {
        if (!visitorId) {
          const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
          const data = await response.json();
          visitorId = data.visitor;
          window.sessionStorage.setItem('visitor_id', data.visitor);
        }
        Clerk('config', {
          visitor: visitorId,
        });
      } catch (error) {
        console.error('Error:', error);
      } finally {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
Recuerda traducir los Headlines en Element -> Edit -> Select Design al idioma correcto también.

Múltiples inventarios #

Si tienes una sola Store con múltiples inventarios e idiomas, entonces deberás crear varias Clerk Apps para asegurar una sincronización de datos rápida.

Esto se hace para que las Stores no compartan el mismo rate limit y velocidad de restauración en la Shopify ADMIN API.

  • En el backend de Shopify, ve a Apps > Develop apps para tu Store.

  • Haz clic en el botón Create an app y repite estos pasos hasta que tengas equivalentes “Clerk.io” apps al número de subdominios de la tienda.

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.