Это плавно работает в Shopify и делится опытом для всех, кто хочет интегрировать Shopify с Mixpanel.

Одна из больших проблем заключается в том, что домен магазина отличается от домена оформления заказа, а это означает, что уникальный идентификатор, который Mixpanel дает пользователям, изменяется, когда они достигают домена оформления заказа (checkout.shopify.com). Shopify не позволяет контролировать какие-либо страницы в процессе оформления заказа в целях безопасности, поэтому необходимо найти обходной путь, чтобы связать идентификатор, который пользователи имели во время просмотра, с идентификатором, указанным в процессе оформления заказа. Для этого мы сохраняем переменную в Shopify, получаем ее с помощью JavaScript при оформлении заказа и передаем ее коду Mixpanel для идентификации клиента.

Следующее было отправной точкой для взлома привязки идентификатора клиента на сайте к страницам оформления заказа (этот пост :)): * Интеграция Shopify + Mixpanel

Целью этой интеграции является: * Установка библиотеки Mixpanel * Отслеживание важных событий электронной коммерции: просмотр продукта, добавление продукта в корзину, удаление продукта из корзины и выполнение заказа.

В theme.liquid

В теге заголовка загрузите библиотеку Mixpanel и назначьте идентификатор клиента Shopify, если пользователь вошел в систему:

<!-- start Mixpanel -->
<script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);

mixpanel.init("<project_token>");</script>

  {% if customer %}
  <script>
    mixpanel.identify('{{customer.id}}');
  </script> 
  {% endif %}

  <script type="text/javascript">
  mixpanel.track_links("#nav a", "click nav link", {
  "referrer": document.referrer
  });
  </script>
<!-- end Mixpanel -->

Страницы продуктов (product.liquid)

Запускать действие Mixpanel при просмотре, а также при добавлении в корзину

<script>
mixpanel.track(
    "Product Viewed",
    {"name": "{{product.title}}",
    "price": "{{ product.price | money_without_currency }}",
    "brand": "{{product.vendor}}",
    "category": "{{ collection.title }}",
    "variant": "{% for variant in product.variants %}{{ variant.sku }}{% endfor %}"
    });
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  $( document ).ready(function() {
    $("#add-to-cart").click(function(){
        mixpanel.track("Added to Cart", {"name": "{{ product.title }}"});
    });
});
</script>

Страница корзины (cart.liquid)

Сохраните уникальный идентификатор пользователя Mixpanel в переменной Shopify с помощью скрытого тега ввода формы, который можно получить на странице благодарности в процессе оформления заказа. А также события, когда товар удаляется из корзины.

Перед закрывающим тегом для формы корзины:

<!-- Begin Mixpanel integration for hidden input to make the ID match between domains -->
<input type="hidden" id="mixpanel_id" name="attributes[mixpanel_id]" value="" />
<!-- End Mixpanel integration -->

Внизу шаблона

Код JS для получения идентификатора Mixpanel и сохранения его в поле ввода формы, а также для отслеживания события при нажатии на ссылку «Удалить»:

<!-- Begin Mixpanel -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        window.onload = function() {
            document.getElementById("mixpanel_id").value = mixpanel.get_distinct_id();
        };

        $(".cart-item-remove").click(function(){
            mixpanel.track("Removed from Cart", {"name": "{% for item in cart.items %}{{item.product.title}}, {% endfor %}"});
        });
    });
</script>
<!-- End Mixpanel -->

Настройки кассы

Shopify не разрешает прямой доступ к страницам оформления заказа, но вы можете включить код для выполнения на странице статуса заказа / благодарности в потоке оформления заказа. Здесь мы добавляем библиотеку Mixpanel, получаем идентификатор Mixpanel, хранящийся в переменной продукта Shopify, и отслеживаем завершение заказа.

<!-- start Mixpanel -->
<script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);
mixpanel.init("<project_token>");</script><!-- end Mixpanel -->

<script>
// Retrieve Mixpanel ID
mixpanel.identify('{{ attributes.mixpanel_id }}');

mixpanel.people.set({
  "$name": "{{ customer.first_name }} {{ customer.last_name }}",
  "$email": "{{ customer.email }}",
  "last_updated": new Date()
});

mixpanel.people.track_charge("{{order.total_price | money_without_currency}}".replace(",",""));

mixpanel.track("Order Completed");
</script>
<!-- End Mixpanel -->

Это результат интеграции Mixpanel в Shopify для White Tale Coffee, Scalable Path с помощью отличной службы поддержки со стороны Mixpanel (привет Мариссе!).

Мне удалось заставить это работать, протолкнув идентификатор MixPanel в файле cart.liquid в качестве атрибута продукта, как показано ниже:

<input type="hidden" id="mixpanel_id" name="attributes[mixpanel_id]" value="" />
      <script>
        $(document).ready(function(){
            document.getElementById("mixpanel_id").value = mixpanel.get_distinct_id();
        });
      </script>

Затем я смог получить идентификатор MixPanel при подтверждении заказа в разделе «Дополнительный контент и сценарии» в разделе оформления заказа и идентифицировать пользователя как обычно, например:

    <script type="text/javascript">
mixpanel.track("Order Completed",
        { "Checkout Total": "{{ total_price | money_without_currency }}" });

mixpanel.identify('{{ attributes.mixpanel_id  }}');

mixpanel.people.set({
  "$name": "{{ customer.first_name }} {{ customer.last_name }}",
  "$email": "{{ customer.email }}",
  "last_updated": new Date()
});

mixpanel.people.track_charge({{ total_price | money_without_currency }});
</script>