Shopify

Get Started

Instala Clerk en Shopify siguiendo estos sencillos pasos

Configura Clerk 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.

Conectando tu tienda #

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

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

Agregar tienda #

  1. Inicia sesión en my.clerk.io. La primera vez que lo hagas, verás la página para agregar una 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 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 agrega 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 }}"
    }
  });

  // 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 agrega esto justo antes de </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Instalar 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 #

Sincronizar datos conecta tu tienda de Shopify con Clerk, lo que permite a Clerk acceder a tus productos, pedidos, clientes y otra información de la tienda. Esto permite que Clerk proporcione recomendaciones y resultados de búsqueda personalizados 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 e idiomas #

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

  1. Termina primero la configuración básica en esta guía.
  2. Abre my.clerk.io > Data > Configuration.
  3. Configura 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 ser segmentado por ubicación.
  5. Inicia una nueva sincronización y verifica las URLs de los 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 tienes claro qué códigos de idioma utiliza tu tienda, pide al asistente Sidekick de Shopify que liste los idiomas configurados para la tienda.

Utiliza la guía de mapeo detallada aquí: Configuración de la integración de Shopify.

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 de API. Usa request.locale.iso_code de Shopify para asignar la clave correcta automáticamente en cada carga de página.

Reemplaza el contenido de clerk-tracking.liquid con el fragmento completo a continuación. Agrega una entrada {% when %} para cada idioma y establece {% else %} con la clave de la 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 %}
  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 de Shopify (no solo varios idiomas dentro de una tienda), crea una tienda Clerk.io por cada tienda de 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 de 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.