Shopify

Get Started

Instala Clerk.io en Shopify siguiendo estos pasos fáciles.

Conectando tu Tienda #

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

El video a continuación te muestra qué hacer, paso a paso. Usa el resto de la guía como referencia :)

Después de seguir estos simples pasos, podrás ver tu Tienda de Demostración en Vivo, que te brinda una visión personal de cómo funcionará Clerk.io en tu tienda en línea.

1. Agregar Tienda #

  1. Inicia sesión en my.clerk.io. La primera vez que lo hagas, verás la página Agregar Nueva Tienda.

  2. Escribe el Nombre y Dominio de tu tienda en línea.

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

  4. Haz clic en Agregar Tienda.

2. Instalar seguimiento de visitantes #

  1. En tu 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 ].
,
{
  "name": "Clerk settings",
  "settings": [
    {
      "type": "header",
      "content": "Clerk"
    },
    {
      "type": "checkbox",
      "id": "enable_clerk",
      "label": "Habilitar Clerk",
      "default": true
    }
  ]
}
  1. Haz clic en Save.
  2. Bajo Snippets, haz clic en Add a new snippet llamado clerk-tracking 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 Clave Pública de my.clerk.io > Developers > API Keys.
<!-- Inicio de la herramienta de personalización de comercio electrónico de Clerk.io - 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>
<!-- Fin de la herramienta de personalización de comercio electrónico de Clerk.io - www.clerk.io -->
  1. Abre theme.liquid y agrega esto justo antes de </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}

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

4. Sincroniza tus Datos #

  1. En Shopify, ve a Apps > App and sales channel settings y haz clic en Develop apps.
  2. Haz clic en Create app, nómbralo “Clerk.io”, elige el desarrollador de la aplicación, luego haz clic en Create app nuevamente.
  3. Haz clic en Configuration → Admin API integration → Configure.
  4. Bajo Admin API access scopes, otorga acceso de lectura (alcances que comienzan con read_) a lo siguiente:
    • Clientes
    • Inventario
    • Locales
    • Mercados
    • Páginas de Tienda en Línea
    • Pedidos
    • Productos
    • Contenido de la Tienda
    • Traducciones
  5. Haz clic en Save, luego en Install App → Install.
  6. Abre API Credentials y copia tu Dominio de Shopify y la Clave API, Token de Acceso y Clave Secreta de la aplicación.
  7. Ve a my.clerk.io > Data > Configuration y pega estos valores en el formulario. Elige un tamaño de imagen predeterminado si se solicita, luego haz clic en Start Sync.

Ejemplo de instalación completa #

Shopify ha actualizado la forma en que se agregan las Aplicaciones Privadas. Estamos trabajando en una nueva versión del video. Hasta entonces, consulta cómo agregar una Aplicación Privada aquí.

En este video puedes obtener una visión completa de lo que se necesita para configurar Clerk.io en una tienda Shopify.

Múltiples dominios/idiomas #

La forma más fácil de implementar Clerk.io en múltiples dominios en configuraciones estándar es creando una Tienda 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 llevar un seguimiento de cada dominio.

  1. Comienza creando tu Tienda principal y sigue la Guía de Configuración para conectar tu Tienda a Clerk.io. Elige las Recomendaciones y/o Búsqueda que deseas mostrar en tu tienda en línea.

  2. Cuando hayas completado la configuración inicial, haz clic en "+ Agregar nueva Tienda" - la última opción en la lista desplegable (típicamente encontrada debajo de tus Tiendas existentes y el nombre de la empresa):

3. En la página Agregar Nueva Tienda, ingresa los detalles de tu dominio.

4. Haz clic en ¿Copiar de la Tienda existente? y selecciona la Tienda de la que deseas copiar contenido. Luego haz clic en Agregar Tienda. Esto transferirá el Contenido y los Diseños de tu Tienda principal.

5. Sigue la Guía de Configuración nuevamente para activar Clerk.io haciendo clic en Configuraciones -> Guías de Configuración para Sincronizar Datos para el nuevo dominio.

6. Una vez que la Sincronización de Datos esté completa, tu dominio estará listo y utilizando la misma configuración que tu Tienda principal.

7. Repite este proceso para cada uno de tus dominios de idioma de Shopify.

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

Aquí tienes un ejemplo del script de seguimiento modificado para incluir múltiples idiomas:

<!-- Inicio de la herramienta de personalización de comercio electrónico de Clerk.io - 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>
<!-- Fin de la herramienta de personalización de comercio electrónico de Clerk.io - www.clerk.io -->
Recuerda traducir Títulos en Contenido -> Editar -> Seleccionar Diseño al idioma correcto también.

Múltiples Inventarios #

Si tienes una sola Tienda con múltiples inventarios e idiomas, entonces necesitarás crear múltiples Aplicaciones de Clerk.io para asegurar una rápida sincronización de datos. Esto se hace para que las Tiendas no compartan el mismo límite de tasa y la tasa de restauración en la API ADMIN de Shopify.

  • En el backend de Shopify, ve a Apps > Develop apps para tu Tienda.
  • Haz clic en el botón Crear una aplicación, y repite estos pasos hasta que tengas aplicaciones “Clerk.io” equivalentes 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.