shopifyの会員登録時に紹介されて会員登録した人とそうでない人を区別したいと依頼がありました。shopifyの顧客管理にはデフォルトで「タグ」の設定ができるようになっているので、それを利用して、顧客の区別ができるようにしました。

javascriptを少し追加すれば実装でき、URLパラメータで任意にタグを設定できるので、様々な応用も効く方法だと思います。

実装する仕様

実装する仕様は下記のようなものです。

• /account/register?addTags=tag1でアクセスした会員登録画面で会員登録すると、顧客管理画面のタグに「tag1」が最初から追加される。
• /account/register?addTags=tag1,tag2のようにカンマ区切りで設定すると、顧客管理画面のタグは「tag1」「tag2」といったように複数のタグが追加される。
• /account/registerのときは何もタグは追加されない。

実装するjavascript

今回はデフォルトテーマ「Dawn」に実装することを想定していますが、少し変更すれば別のテーマやオリジナルのテーマでも使えると思います。

javascript

(function(){
  const url = new URL(window.location.href);
  const params = url.searchParams;
  if( params.get('addTags') != null ){
    const createCustomerForm = document.getElementById("create_customer");
    const addTagsInput = `<input type="hidden" name="customer[tags]" value="${params.get('addTags')}">`;
    createCustomerForm.insertAdjacentHTML('beforeend',addTagsInput);
  }
})();

別のテーマなどに追加する場合はcreateCustomerFormを実際に実装されているform要素を取得するようにすれば大丈夫です。

Dawnのcustomers/register.liquid(フォーム部分抜粋)

{%- form 'create_customer', novalidate: 'novalidate' -%}
{%- if form.errors -%}
<h2 class="form__message" tabindex="-1" autofocus="">
  <svg aria-hidden="true" focusable="false" role="presentation">
    <use href="#icon-error"></use>
  </svg>
  {{ 'templates.contact.form.error_heading' | t }}
</h2>
<ul>
  {%- for field in form.errors -%}
  <li>
    {%- if field == 'form' -%}
    {{ form.errors.messages[field] }}
    {%- else -%}
    <a href="#RegisterForm-{{ field }}">
      {{ form.errors.translated_fields[field] | capitalize }}
      {{ form.errors.messages[field] }}
    </a>
    {%- endif -%}
  </li>
  {%- endfor -%}
</ul>
{%- endif -%}
<div class="field">
  <input type="text" name="customer[first_name]" id="RegisterForm-FirstName" {%="" if="" form.first_name=""
    %}value="{{ form.first_name }}" endif="" %}="" autocomplete="given-name"
    placeholder="{{ 'customer.register.first_name' | t }}">
  <label for="RegisterForm-FirstName">
    {{ 'customer.register.first_name' | t }}
  </label>
</div>
<div class="field">
  <input type="text" name="customer[last_name]" id="RegisterForm-LastName" {%="" if="" form.last_name=""
    %}value="{{ form.last_name }}" endif="" %}="" autocomplete="family-name"
    placeholder="{{ 'customer.register.last_name' | t }}">
  <label for="RegisterForm-LastName">
    {{ 'customer.register.last_name' | t }}
  </label>
</div>
<div class="field">
  <input type="email" name="customer[email]" id="RegisterForm-email" {%="" if="" form.email="" %}=""
    value="{{ form.email }}" endif="" spellcheck="false" autocapitalize="off" autocomplete="email" aria-required="true"
    form.errors="" contains="" 'email'="" aria-invalid="true" aria-describedby="RegisterForm-email-error"
    placeholder="{{ 'customer.register.email' | t }}">
  <label for="RegisterForm-email">
    {{ 'customer.register.email' | t }}
  </label>
</div>
{%- if form.errors contains 'email' -%}
<span id="RegisterForm-email-error" class="form__message">
  <svg aria-hidden="true" focusable="false" role="presentation">
    <use href="#icon-error"></use>
  </svg>
  {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
</span>
{%- endif -%}
<div class="field">
  <input type="password" name="customer[password]" id="RegisterForm-password" aria-required="true" {%="" if=""
    form.errors="" contains="" 'password'="" %}="" aria-invalid="true" aria-describedby="RegisterForm-password-error"
    endif="" placeholder="{{ 'customer.register.password' | t }}">
  <label for="RegisterForm-password">
    {{ 'customer.register.password' | t }}
  </label>
</div>
{%- if form.errors contains 'password' -%}
<span id="RegisterForm-password-error" class="form__message">
  <svg aria-hidden="true" focusable="false" role="presentation">
    <use href="#icon-error"></use>
  </svg>
  {{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.
</span>
{%- endif -%}
<button>
  {{ 'customer.register.submit' | t }}
</button>
<!-- ここにタグのinputが追加される  -->
{%- endform -%}

今回のポイントは「name="customer[tags]"」でタグの情報を追加できるところだと思います。

shopifyのreferenceには載っていないかもしれないことですが、海外の有料テーマを購入して研究していた時に見つけました。shopifyのテーマタグは意外にこうやって知ることがでは多いです。

今回のコード単体ではそこまで使えないですが、他の機能などと組み合わせることでできることが増えそうな感じがします。