Shopify

Get Started

Instala Clerk.io en Shopify siguiendo estos sencillos pasos

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

Antes de la configuración #

Shopify y Clerk.io tienen cada uno una parte en la configuración. El lado de Shopify proporciona el acceso, la aplicación y el seguimiento de la tienda. El lado de Clerk.io conecta la tienda, configura la sincronización y comienza a importar datos.

Shopifymy.clerk.io
Crea e instala la aplicación, añade el seguimiento y proporciona el dominio de Shopify para la sincronización.Añade la tienda, configura la sincronización de Shopify, inicia la primera sincronización y verifica los datos importados.

Dominio de Shopify #

Se necesita el dominio de Shopify al configurar la sincronización. Usa la dirección .myshopify.com incluso cuando la tienda en línea utilice un dominio público personalizado.

  1. En Shopify, ve a Settings > Domains.
  2. Copia la dirección actual de la tienda que termina en .myshopify.com.

Shopify utiliza la dirección myshopify.com para identificar la tienda. Lee más en la documentación de dominios de Shopify.

Conectando tu tienda #

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

Después de seguir estos sencillos pasos, podrás ver tu Live Demo Store, que te da una visión personalizada de cómo funcionará Clerk.io 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 el Dominio público de tu tienda online.

  3. Elige Shopify como Plataforma y selecciona tu Moneda.

  4. Haz clic en Add Store.

El dominio de Shopify .myshopify.com se introduce más adelante en Data > Configuration cuando se configura la sincronización.

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 añade el fragmento de configuración de Clerk al final, justo antes del último ].

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

  1. Haz clic en Save.

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

  3. Inserta tu fragmento de seguimiento de visitante de Clerk en el nuevo archivo y haz clic en Save. Sustituye INSERT_PUBLIC_API_KEY por 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 template.name == 'cart' %}[{% for item in cart.items %}{{ item.product_id | json }}{% unless forloop.last %}, {% endunless %}{% endfor %}]{% elsif product %}{{ product.id | json }}{% 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 %}

Instalar seguimiento de pedidos #

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

  2. Haz clic en Add custom pixel, nómbralo Clerk.io, luego haz clic en Add pixel.

  3. Define el requisito de permisos del píxel a Not required. Esta es la configuración recomendada para la configuración predeterminada de Clerk.io, ya que Clerk.io utiliza seguimiento sin cookies y no establece cookies persistentes. Por lo tanto, el píxel se ejecutará independientemente de si el visitante acepta cookies de marketing, analíticas o de preferencias. Lee más sobre la solución sin cookies de Clerk.io.

    Si has configurado Clerk.io de forma personalizada para usar identificadores de visitantes persistentes, define el requisito de permisos en Analytics en su lugar. Esto solo es necesario cuando tu configuración personalizada realmente usa cookies persistentes; no es necesario para la configuración predeterminada sin cookies.

  4. 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.

Sincronizar datos #

La aplicación y la sincronización se configuran en la guía de Sincronizar Datos. Sigue primero los pasos de Shopify y luego completa los pasos de my.clerk.io para conectar las credenciales, ingresar el dominio .myshopify.com y comenzar la primera sincronización.

Mercados y localizaciones #

Si tu configuración de Shopify utiliza varios idiomas, mercados o dominios, configura esto antes de que tu tienda esté en vivo.

  1. Termina primero la configuración base en 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 estar limitado por ubicación.
  5. Inicia una nueva sincronización y verifica las URLs de producto en cada idioma/dominio de la tienda.

Shop Locale/Shopify Locale debe usar el código de localización de idioma estandarizado de Shopify, por ejemplo da para Dinamarca y sv para Suecia.

Si no estás seguro de qué códigos de localización utiliza tu tienda, pídele al asistente Sidekick de Shopify que liste las localizaciones configuradas para la tienda.

Utiliza la guía detallada de mapeo aquí: Configuración de 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 de Clerk.io separadas por mercado, cada tienda tiene su propia clave API. Utiliza 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. Agrega una entrada {% when %} para cada localización y establece {% else %} para 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 template.name == 'cart' %}[{% for item in cart.items %}{{ item.product_id | json }}{% unless forloop.last %}, {% endunless %}{% endfor %}]{% elsif product %}{{ product.id | json }}{% 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 sola tienda), crea una tienda de Clerk.io por cada tienda de Shopify:

  1. En my.clerk.io, haz clic en + Add new Store.
  2. Copia el contenido de la tienda principal durante la creación.
  3. Conecta y sincroniza cada tienda de Shopify por separado.
  4. Utiliza la clave pública correspondiente por 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.