Shopify

Get Started

Instala Clerk en Shopify siguiendo estos sencillos pasos

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

Conectando tu tienda #

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

Después de seguir estos sencillos pasos, podrás ver tu Live Demo Store, que te da una visión 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 Añadir Nueva Tienda.

  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 Clerk en el nuevo archivo y haz clic en Save. Sustituye 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);
  const 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 }}"
    }
  });

  // Clerk.js Context
  Clerk('context', {
    product: {% if product %}{{ product.id }}{% else %}null{% endif %},
    category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
    page: {% if product %}null
          {% elsif collection %}null
          {% elsif page %}{{ page.id }}
          {% elsif blog %}{{ blog.id }}
          {% elsif article %}{{ article.id }}
          {% elsif template.name == 'index' %}'homepage'
          {% else %}'{{ template.name }}'
          {% endif %}
  });

  {% 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 {
        function publishClerkContext() {
          if (window.Shopify?.analytics?.publish) {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          } else {
            setTimeout(publishClerkContext, 200);
          }
        }
        publishClerkContext();
      }
    })();
  });
</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, ponle nombre Clerk.io, luego haz clic en Add pixel.

  3. Pega tu código de seguimiento de ventas de Clerk 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 Shopify con Clerk, permitiendo que Clerk acceda a tus productos, pedidos, clientes y otra información de la tienda. Esto permite a Clerk proporcionar 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.

Mercados y configuraciones regionales #

Si tu configuración de Shopify utiliza varios idiomas, mercados o dominios, configura esto antes de lanzar el sitio.

  1. Termina primero la configuración base de esta guía.
  2. Abre my.clerk.io > Data > Configuration.
  3. Configura los ajustes específicos de mercado (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Agrega ubicaciones de inventario si el stock debe segmentarse por ubicación.
  5. Inicia una nueva sincronización y verifica las URLs de productos en cada idioma/dominio de la tienda.

Shop Locale/Shopify Locale debe usar el código de idioma estándar de Shopify, por ejemplo da para Dinamarca y sv para Suecia.

Si no estás seguro de qué códigos de configuración regional utiliza tu tienda, pide al asistente Sidekick de Shopify que liste las configuraciones regionales configuradas para la tienda.

Utiliza la guía de mapeo detallada aquí: Shopify integration settings.

Recuerda traducir los Headlines en Element -> Edit -> Select Design para que coincidan con cada idioma.

Cambiar claves API #

Si tu configuración utiliza tiendas Clerk.io separadas por mercado, cada tienda tiene su propia clave API. Usa request.locale.iso_code de Shopify para asignar automáticamente la clave correcta en cada carga de página.

Reemplaza el contenido de clerk-tracking.liquid con el siguiente fragmento completo. Añade una entrada {% when %} para cada configuración regional y asigna {% else %} a la clave de tu tienda predeterminada:

<!-- 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);
  {% case request.locale.iso_code %}
    {% when 'da' %}
      {% assign publicKey = 'YOUR_DANISH_KEY' %}
    {% when 'sv' %}
      {% assign publicKey = 'YOUR_SWEDISH_KEY' %}
    {% else %}
      {% assign publicKey = 'YOUR_DEFAULT_KEY' %}
  {% endcase %}
  const publicKey = '{{ publicKey }}';
  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 }}"
    }
  });

  // Clerk.js Context
  Clerk('context', {
    product: {% if product %}{{ product.id }}{% else %}null{% endif %},
    category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
    page: {% if product %}null
          {% elsif collection %}null
          {% elsif page %}{{ page.id }}
          {% elsif blog %}{{ blog.id }}
          {% elsif article %}{{ article.id }}
          {% elsif template.name == 'index' %}'homepage'
          {% else %}'{{ template.name }}'
          {% endif %}
  });

  {% 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 {
        function publishClerkContext() {
          if (window.Shopify?.analytics?.publish) {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          } else {
            setTimeout(publishClerkContext, 200);
          }
        }
        publishClerkContext();
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Configuración multi-tienda #

Si tu configuración abarca varias tiendas Shopify (no solo múltiples idiomas dentro de una sola tienda), crea una tienda Clerk.io por cada tienda Shopify:

  1. En my.clerk.io, haz clic en + Add new Store.
  2. Copia el contenido desde la tienda principal durante la creación.
  3. Conecta y sincroniza cada tienda Shopify por separado.
  4. Usa la clave pública correspondiente para cada tienda en el seguimiento.

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