Shopify

Get Started

Instala Clerk.io en Shopify siguiendo estos sencillos pasos

Pon Clerk.io en funcionamiento en tu tienda 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.

Antes de la configuración #

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

Shopifymy.clerk.io
Encuentra el dominio de Shopify y el código de colaborador, aprueba el acceso del colaborador, crea e instala la aplicación y agrega el seguimiento.Agrega la Tienda, configura la sincronización de Shopify, inicia la primera sincronización y verifica los datos importados.

Acceso a Shopify #

Si un tercero como Clerk.io está configurando o resolviendo problemas de la integración, necesitará el dominio actual myshopify.com de la tienda y el acceso de colaborador para iniciar sesión en el backend de Shopify.

Encontrar el dominio #

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

Utiliza la dirección .myshopify.com para la configuración de integración con Shopify, incluso cuando la tienda web utilice un dominio público personalizado. Shopify utiliza la dirección myshopify.com para identificar la tienda y para el acceso de administración. Lee más en la documentación sobre dominios de Shopify.

Encontrar el código #

  1. En Shopify, ve a Settings > Users.
  2. Si la tienda es parte de una organización, abre Users. De lo contrario, abre Users & permissions.
  3. Haz clic en Security.
  4. Haz clic en el código de cuatro dígitos de colaborador para copiarlo.

El tercero utiliza este código al enviar una solicitud de colaborador. Aprueba la solicitud en Settings > Users → Requests. Consulta la documentación sobre cuentas de colaborador de Shopify para los pasos actuales.

Responsabilidad de la configuración #

El equipo de la tienda de Shopify o un tercero con los permisos necesarios de Shopify puede completar los pasos del lado de Shopify. El acceso de colaborador no incluye automáticamente el permiso para desarrollar apps. Si el tercero no puede crear o instalar la app, el equipo de la tienda Shopify debe completar esos pasos y compartir de forma segura el Client ID y el Client Secret de la app con la persona que configura la sincronización en my.clerk.io.

Conectando tu tienda #

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

Después de seguir estos sencillos pasos, podrás ver tu Live Demo Store, que te ofrece una visión personal de cómo funcionará Clerk.io 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 Add New Store.

  2. Escribe el Nombre y el Dominio público de tu tienda online.

  3. Elige Shopify como Platform y selecciona tu Currency.

  4. Haz clic en Add Store.

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

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 desees 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. 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 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);
  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 agrega 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, nómbralo Clerk.io, luego haz clic en Add pixel.

  3. Establece el requisito de permiso del pixel en Not required. Esta es la configuración recomendada para la configuración predeterminada de Clerk.io porque Clerk.io utiliza seguimiento sin cookies y no establece cookies persistentes. Por lo tanto, el pixel se ejecutará independientemente de si el visitante acepta cookies de marketing, análisis o preferencias. Lee más sobre la solución sin cookies de Clerk.io.

    Si has configurado Clerk.io de manera personalizada para utilizar identificadores de visitantes persistentes, configura el requisito de permiso en Analytics en su lugar. Esto solo es necesario cuando tu configuración personalizada realmente utiliza 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.
Insert pixel tracking

Sincronizar datos #

La app y la sincronización se configuran en la guía Sincronizar datos. Sigue primero los pasos de Shopify, luego completa los pasos de my.clerk.io para conectar las credenciales, introducir el dominio .myshopify.com e iniciar la primera sincronización.

Mercados e idiomas #

Si tu configuración de Shopify utiliza varios idiomas, mercados o dominios, configúralos antes de lanzar la tienda al público.

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

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

Si no estás seguro de qué códigos de idioma usa tu tienda, pídele al asistente Sidekick de Shopify que liste los idiomas configurados para la tienda.

Utiliza la guía de mapeo detallada aquí: Ajustes 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 Clerk.io separadas por mercado, cada tienda tiene su propia llave 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 idioma y define {% else %} con 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 varios idiomas en 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 de 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 escaparate 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.