Shopify

Get Started

Instala Clerk en Shopify siguiendo estos sencillos pasos

Haz que Clerk funcione en tu tienda Shopify en solo unos pasos. Esta guía te lleva a través de la conexión de tu tienda, la instalación de 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.

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 sencillos pasos, podrás ver tu Live Demo Store, que te da una vista personal de cómo funcionará Clerk en tu tienda online.

Añadir tienda #

Inicia sesión en my.clerk.io. La primera vez que lo hagas, verás la página “Add New Store”.
Escribe el Nombre y el Dominio de tu tienda online.
Elige Shopify como la Plataforma y selecciona tu Moneda.
Haz clic en Add Store.

Instalar seguimiento de visitantes #

En tu panel de Shopify, ve a Online Store > Themes.
Haz clic en ... > Edit code para el tema que quieras modificar.
Abre settings_schema.json y añade el fragmento de configuración 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
    }
  ]
}

Haz clic en Save.
Bajo Snippets, haz clic en Add a new snippet llamado clerk-tracking y haz clic en Done.
Inserta tu fragmento de seguimiento de visitantes 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);
  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>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Abre theme.liquid y añade esto justo antes de </head>:

{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}

Instalar seguimiento de pedidos #

En Shopify, ve a Settings > Customer Events.
Haz clic en Add custom pixel, nómbralo Clerk.io, luego haz clic en Add pixel.
Pega tu código Clerk Sales Tracking 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,
    }),
  });
});

Haz clic en Connect y confirma.

Sincronizar datos #

En Shopify, ve a Apps > App and sales channel settings y haz clic en Develop apps.

Haz clic en Create app, nómbralo “Clerk.io”, elige el desarrollador de la aplicación y luego haz clic de nuevo en Create app.
Haz clic en Configuration → Admin API integration → Configure.

Bajo Admin API access scopes, otorga acceso de solo lectura (scopes comenzando por read_) a lo siguiente:
- Customers
- Inventory
- Locales
- Markets
- Online Store Pages
- Orders
- Products
- Store Content
- Translations

Haz clic en Save, luego Install App → Install.
Abre API Credentials y copia tu dominio de Shopify y las claves API Key, Access Token y Secret Key de la app.

Ve a my.clerk.io > Data > Configuration y pega estos valores en el formulario. Elige un tamaño de imagen por defecto si se solicita y 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. Mientras tanto, 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 en una tienda Shopify.

Múltiples dominios/idiomas #

La forma más sencilla de implementar Clerk en varios 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 hacer el seguimiento de cada dominio.

Configuración de tiendas #

Comienza creando tu main Store y sigue la guía de configuración para conectar tu tienda a Clerk. Elige las Recommendations y/o Search que quieras mostrar en tu tienda online.
Cuando hayas completado la configuración inicial, haz clic en "+ Add new Store" - la última opción de la lista desplegable (normalmente aparece debajo de tus tiendas existentes y el nombre de tu compañía):

En la Add New Store page, introduce los detalles de tu dominio.
Haz clic en Copy from existing Store? y selecciona la tienda de la que deseas copiar el contenido. Luego haz clic en Add Store. Esto transferirá el Content y los Designs de tu tienda principal.
Sigue la guía de configuración nuevamente para activar Clerk haciendo clic en Settings > Setup Guides para Sync Data del nuevo dominio.
Una vez que Data Sync esté completo, tu dominio estará listo y usando la misma configuración que tu tienda principal.
Repite este proceso para cada uno de tus dominios de idioma de Shopify.
Finalmente, modifica el tracking script 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 varios idiomas:

<!-- 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 = "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>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Recuerda traducir los Headlines en Content -> Edit -> Select Design al idioma correcto también.

Múltiples inventarios #

Si tienes una sola tienda con múltiples inventarios e idiomas, entonces tendrás que crear múltiples aplicaciones Clerk para asegurar una sincronización de datos rápida.

Esto se hace para que las tiendas no compartan el mismo rate limit y la tasa de restauración en la Shopify ADMIN API.

En el panel de Shopify, ve a Apps > Develop apps para tu tienda.
Haz clic en el botón Create an app, y repite estos pasos hasta tener tantas aplicaciones “Clerk.io” como subdominios tenga tu 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.