Shopify

Get Started

Instala Clerk.io en Shopify siguiendo estos sencillos pasos

Ponga en marcha Clerk.io en su tienda Shopify en solo unos pasos. Esta guía le guía por la conexión de su tienda, la instalación del seguimiento y la sincronización de sus 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 en el escaparate. El lado de Clerk.io conecta la tienda, configura la sincronización e inicia la importación de datos.

Shopifymy.clerk.io
Cree e instale la aplicación, añada el seguimiento y proporcione el dominio de Shopify para la sincronización.Añada la tienda, configure la sincronización de Shopify, inicie la primera sincronización y verifique los datos importados.

Dominio de Shopify #

El dominio de Shopify es necesario al configurar la sincronización. Utilice la dirección .myshopify.com incluso cuando la tienda utilice un dominio público personalizado.

  1. En Shopify, vaya a Settings > Domains.
  2. Copie la dirección actual .myshopify.com de la tienda.

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

Conectar su tienda #

El primer paso para instalar Clerk.io es conectar su tienda con su cuenta de Clerk.io.

Después de seguir estos sencillos pasos, podrá ver su Live Demo Store, que le ofrece una vista personal de cómo funcionará Clerk.io en su tienda online.

Añadir tienda #

  1. Inicie sesión en my.clerk.io. La primera vez que lo haga, verá la página Añadir nueva tienda.

  2. Escriba el Nombre y el Dominio público de su tienda online.

  3. Elija Shopify como Platform y seleccione su Currency.

  4. Haga 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, vaya a Online Store > Themes.

  2. Haga clic en ... > Edit code para el tema que desea modificar.

  3. Abra settings_schema.json y agregue 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. Haga clic en Save.

  2. Bajo Snippets, haga clic en Add a new snippet llamado clerk-tracking.liquid y luego haga clic en Done.

  3. Inserte su fragmento de seguimiento de visitantes Clerk en el archivo nuevo y haga clic en Save. Reemplace INSERT_PUBLIC_API_KEY con su 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);
  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. Abra theme.liquid y agregue esto justo antes de </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Instalar seguimiento de pedidos #

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

  2. Haga clic en Add custom pixel, nómbrelo Clerk.io y luego haga clic en Add pixel.

  3. Establezca el requisito de permiso del píxel en 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 funcionará independientemente de si el visitante acepta cookies de marketing, analíticas o de preferencias. Lea más sobre la solución sin cookies de Clerk.io.

    Si ha configurado Clerk.io de manera personalizada para usar IDs de visitante persistentes, establezca el requisito de permiso en Analytics en su lugar. Esto solo es necesario cuando su configuración personalizada realmente utiliza cookies persistentes; no es necesario para la configuración sin cookies por defecto.

  4. Pegue su código de seguimiento de ventas Clerk y haga 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. Haga clic en Connect y confirme.
Insert pixel tracking

Sincronizar datos #

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

Mercados y listas de idiomas #

Si su configuración de Shopify utiliza varios idiomas, mercados o dominios, configure esto antes de ponerlo en producción.

  1. Termine primero la configuración básica en esta guía.
  2. Abra my.clerk.io > Data > Configuration.
  3. Configure los ajustes específicos para cada mercado (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Añada ubicaciones de inventario si el stock debe estar segmentado por ubicación.
  5. Inicie una nueva sincronización y verifique las URLs de productos en cada idioma/dominio de 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á seguro de qué códigos de idioma utiliza su tienda, pida al asistente Sidekick de Shopify que liste los idiomas configurados para la tienda.

Use la guía de mapeo detallada aquí: Ajustes de integración de Shopify.

Recuerde traducir los Headlines en Element -> Edit -> Select Design para que coincidan con cada idioma.

Cambiar claves API #

Si su configuración utiliza tiendas Clerk.io separadas por mercado, cada tienda tiene su propia clave API. Utilice request.locale.iso_code de Shopify para asignar automáticamente la clave correcta en cada carga de página.

Reemplace el contenido de clerk-tracking.liquid por el fragmento completo a continuación. Añada una entrada {% when %} para cada idioma y configure {% else %} con la clave de su 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 su configuración abarca varias tiendas Shopify (no solo varios idiomas dentro de una misma tienda), cree una tienda Clerk.io por cada tienda Shopify:

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