Shopify

Get Started

Instala Clerk en Shopify siguiendo estos sencillos pasos

Pon Clerk en funcionamiento 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 Tienda de Demostración en Vivo, que te brinda una visión 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 Añadir Nueva Tienda.
Escribe el Nombre y Dominio de tu tienda online.
Elige Shopify como la Plataforma y selecciona tu Moneda.
Haz clic en Añadir Tienda.

Instalar seguimiento de visitantes #

En el panel de administración de Shopify, ve a Tienda Online > Temas.
Haz clic en ... > Editar código para el tema que deseas modificar.
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
    }
  ]
}

Haz clic en Guardar.
Bajo Snippets, haz clic en Agregar nuevo fragmento llamado clerk-tracking.liquid y haz clic en Listo.
Inserta tu fragmento de seguimiento de visitantes de Clerk en el nuevo archivo y haz clic en Guardar. Reemplaza INSERT_PUBLIC_API_KEY con tu Clave Pública 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 -->

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 Configuración > Eventos de cliente.
Haz clic en Agregar píxel personalizado, asígnale el nombre Clerk.io y luego haz clic en Agregar píxel.
Pega tu código de seguimiento de ventas de Clerk y haz clic en Guardar.

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 Conectar y confirma.

Sincronizar datos #

Sincronizar datos conecta tu tienda de Shopify con Clerk, permitiendo que Clerk acceda a tus productos, pedidos, clientes y otra información de tu tienda. Esto permite que Clerk proporcione recomendaciones personalizadas y resultados de búsqueda según 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.

Múltiples dominios/idiomas #

La forma más fácil de implementar Clerk 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 hacer un seguimiento de cada dominio.

Configuración de tiendas #

Comienza creando tu Tienda principal y sigue la Guía de Configuración para conectar tu Tienda a Clerk. Elige las Recommendations y/o Search que deseas mostrar en tu tienda online.
Una vez completada la configuración inicial, haz clic en "+ Añadir nueva Tienda" - la última opción en la lista desplegable (normalmente ubicada debajo de tu(s) Tienda(s) existente(s) y el nombre de tu empresa):

En la página Añadir Nueva Tienda, ingresa los datos de tu dominio.
Haz clic en ¿Copiar desde tienda existente? y selecciona la Tienda desde la que quieres copiar elementos. Luego haz clic en Añadir Tienda. Esto transferirá los Elementos y Diseños desde tu Tienda principal.
Sigue nuevamente la Guía de Configuración para activar Clerk haciendo clic en Configuración > Guías de Configuración para Sincronizar Datos para el nuevo dominio.
Una vez que la Sincronización de Datos esté completa, 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 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 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 }}"
      }
    });

    // 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 %}
    });

    ; (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 Títulos en Elemento -> 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 Clerk Apps para asegurar una sincronización de datos rápida.

Esto se hace para que las Tiendas no compartan el mismo límite de velocidad y tasa de restauración en la Shopify ADMIN API.

En el panel de administración de Shopify, ve a Apps > Desarrollar apps para tu Tienda.
Haz clic en el botón Crear una app, y repite estos pasos hasta que tengas tantas apps “Clerk.io” como subdominios tenga 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.