Zenn
🏬

【Shopify.dev和訳】Apps/App Store/Shopify App Store ads/Ad billing

2021/11/26に公開
Shopify
#
apps
tech

この記事について

この記事は、Apps/Shopify App Store/Shopify App Store/Ad billingの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

title: "【Shopify.dev 和訳】Apps/Checkout/Shipping method/Localization"
emoji: "💳"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: [shopify, apps]
published: true

この記事について

この記事は、Localization for shipping methods scriptsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

配送方法に関するスクリプトのローカライズ

スクリプトで支払い方法や配送方法の名前をローカライズして、複数の言語や文化に対応している店舗でこれらのスクリプトを利用することができます。

仕組み

翻訳された文字列をスクリプトにハードコーディングするのではなく、ストアがサポートするロケールごとに個別のリソースファイルを作成します。これらのロケールファイルに、翻訳キーと翻訳値を入力します。翻訳された値は、スクリプトがプッシュされたときに含まれます。

このスクリプトがチェックアウト時に実行されると、注文のロケールを読み取り、お客様の希望する言語でメソッド名を提供します。

ロケールファイルとは、スクリプトで使用されるテキスト文字列の翻訳セットを含む JSON ファイルのことです。ロケールファイルは、ストアがサポートするすべての言語ごとに必要です。デフォルトのロケールファイルはありません。代わりに、スクリプトがロケールをサポートしていない場合は、翻訳キーの名前がデフォルト値として使用されます。

ロケールファイルの作成

  1. 依存関係にある @shopify/i18n-as をインストールします。

  2. スクリプトプロジェクトでは、すべてのロケールファイルを格納するために、次のサブディレクトリを作成します： locales/

  3. ロケール設定ファイル（i18n.config.json）を作成します。:

    • プロジェクトのルートディレクトリに、手動でファイルを作成し、i18n.config.jsonという名前をつけます。
    • このファイルを開き、以下のコードを追加します。:
    i18n.config.json
    {
  "localeFilesDirectory": "./locales"
}

    ロケールファイルを置くディレクトリを設定します。

  4. ストアがサポートする各言語および方言のロケールファイルを作成します。

    • 手動でファイルを作成し、標準的なIETF 言語タグフォーマットを使用してファイル名を付けます。最初のサブタグには 2 文字の言語コード（ISO 639-1）、2 番目のサブタグには 2 文字の国コード（ISO 3166-1 alpha-2）を大文字で記述します。
      例えば、「フランス語-カナダ」の場合はfr-CA.json、「英語-グレートブリテン」の場合はen-GB.json、「フィンランド-全地域」の場合はfi.jsonとなります。

    • ファイルに翻訳キーを追加する。keyフィールドは、翻訳可能なコンテンツとその翻訳値を関連付けます。valueフィールドには、翻訳可能なコンテンツそのものが表示されます。

    例えば、en.json の場合:

    locales/en.json
    {
  "key": "value",
  "Renamed method": "Renamed method"
}

    例えば、fr.json の場合：

    locales/fr.json
    {
  "key": "valeur",
  "Renamed method": "Méthode renommée"
}

    与えられたキーの値がない場合や、サポートされていないロケールがスクリプトに渡された場合、キーの名前が翻訳値として使用されます。翻訳キーの名前は、デフォルトの翻訳値と同じになるように設定してください。

    例えば、ある店舗が英語、フランス語、ポルトガル語のロケールをサポートしているとします。スクリプトでtranslate(locale, "Rename Method")を呼び出したところ、英語とフランス語のロケールファイルしかありませんでした。ロケールがポルトガルの場合、チェックアウト時にRename Methodが顧客に表示されます。

スクリプトに翻訳キーを追加

Pament methodsとShipping methodsの両 API は、以下のような機能を持っています。

  • 注文のロケールをPurchaseProposal.localeで入力します。
  • リネームされたメソッドをResult.renameResponseで出力する。
  1. スクリプトの中で、@shopify/as-i18n をインポートします。
    例えば、以下のようになります。
    src/script.ts
    import { translate } from '@shopify/i18n'
  2. 翻訳を使用したい場所では、translate(locale, "key-name")と入力します。
    例えば、以下のようになります
    src/script.ts
    Console.log(translate(locale, "my_key_to_translate"));

テストロケール

翻訳を使用するスクリプトのユニットテストを作成する際には、翻訳文字列をチェックするテストを含めてください。

  1. localeをテスト関数の入力として含める。

    例えば、.setLocale(locale)を
    Domain.TestHelper.PurchaseProposalBuilder.TestHelperに含めます。

    test/script.spec.ts
    function createPurchaseProposal(locale: string):
Domain.PurchaseProposal {
  return new Domain.TestHelper.PurchaseProposalBuilder()
    .setLines([
  ...
    ])
    // ロケールを入力として含める
    .setLocale(locale)
    .build();
}

  2. 翻訳された文字列の出力をチェックするテストを書く。

    例えば、

    test/script.spec.ts
    // ***** 英語の翻訳を利用する *****
result = paymentMethodsHandler(
  new PaymentMethods.Input(createPurchaseProposal('en'), paymentMethods),
  config,
);

expect(result.renameResponse!.renameProposals.length).toBe(1);
expect(result.renameResponse!.renameProposals[0].name).toBe('This is your renamed payment method.');

// ***** フランス語の翻訳を利用する *****
result = paymentMethodsHandler(
  new PaymentMethods.Input(createPurchaseProposal('fr'), paymentMethods),
  config,
);

expect(result.renameResponse!.renameProposals.length).toBe(1);
expect(result.renameResponse!.renameProposals[0].name).toBe('Ceci est votre mode de paiement renommé.');

例

ローカライズを使用したスクリプトの例を以下に示します。

src/script.ts
...
  import { translate } from '@shopify/as-i18n';

  export function paymentMethodsHandler(
    input: PaymentMethods.Input,
    configuration: Configuration,
  ): PaymentMethods.Result {
    //注文のロケールを格納するconstを定義する
    const locale = input.purchaseProposal.locale;

    const sortResponse = new PaymentMethods.SortResponse(input.paymentMethods);
    const filterResponse = new PaymentMethods.FilterResponse([]);
    //ロケールと支払い方法を指定してrenameFirstPaymentMethodを呼び出す
    const renameResponse = renameFirstPaymentMethod(locale, input.paymentMethods);

    return new PaymentMethods.Result(sortResponse, filterResponse, renameResponse);
  }

  function renameFirstPaymentMethod(locale: string, paymentMethods: Domain.PaymentMethod[]): PaymentMethods.RenameResponse {
    var renameProposals = new Array<PaymentMethods.RenameProposal>();

    if (paymentMethods.length > 0) {
      //注文のロケールに基づいて、支払い方法の名前を変更する
      const renameProposal = PaymentMethods.RenameProposal.rename(paymentMethods[0], translate(locale, "Renamed method"));
      renameProposals.push(renameProposal);
    }

    return new PaymentMethods.RenameResponse(renameProposals);
  }

次のステップ

  • Shopify のチェックアウト時に顧客に表示される支払い方法を変更。
  • Shopify のチェックアウト時に顧客に表示される配送方法を変更。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Shopify App Store の広告課金について

お客様の広告がクリックされるたびに、お客様の残高に課金されます。App Store 広告の料金は、30 日ごとに、またはすべてのキャンペーンの残高が 100 ドルを超えたときに請求されます。請求書は米国ドルで表示されます。

請求書の支払いには、Visa、Mastercard、または American Express の有効なクレジットカードを使用できます。プリペイド式のクレジットカードはご利用いただけません。クレジットカードへの課金に問題があった場合、問題が解決するまでお客様の広告は保留となります。

App Store 広告の請求書の確認

App Store 広告の請求書を表示するには、Partner Dashboard の 「Settings」>「Ad billing」 を選択します。各請求書には、請求書の期間中に料金が発生したすべての広告が含まれます。

広告の課金方法

検索広告は CPC（Cost Per Click）入札を採用しているため、誰かがあなたの広告をクリックした場合にのみ課金されます。課金額は、広告のトリガーとなったキーワードに指定した入札額と常に同じです。CPC 課金の仕組みについては、「価格設定」を参照してください。

クリック数は再処理されることがあるため、ある期間のレポートが前回閲覧したときとは異なることがあります。これにより、ある期間の請求書が、同じ期間の前回の請求書と若干異なることもあります。クリック数が再処理される理由はいくつかあります。

  • Shopify は、以前にフィルタリングされなかったボットのクリックを特定しました。これらは過去にさかのぼって削除され、関連する請求は広告主に戻されます。
  • 広告のインプレッションに続いてクリックが発生したが、そのクリックが現在の請求サイクルのデータ処理期間後に発生した場合。このクリックと関連する広告費は、クリックの時点ではなく、インプレッションイベントの時点でカウントされます。しかし、このクリックは、前の請求サイクル内の広告インプレッションに起因するものであるにもかかわらず、次の請求サイクルで請求されます。

広告クレジット

Shopify では、特別なプロモーションの際に広告クレジットを提供する場合があります。広告クレジットを利用すると、App Store 広告の費用に自動的に適用されます。また、広告クレジットを使ってキーワードをテストし、各キーワードの最適なクリック単価を見つけることができます。

広告クレジットを利用する

  1. 「設定」＞「広告課金」 で、現在広告クレジットの対象になっているかどうかを確認します。
  2. クレジットカードを追加して、「保存」 をクリックします。
  3. 「クレジットの利用」 をクリックします。

広告クレジットを利用すると、パートナーダッシュボードの　「広告請求」 ページに利用可能な残りのクレジットが表示されます。請求サイクル中に広告クレジットが適用された場合、そのサイクルの請求書には、使用された広告クレジットの金額が表示されます。

税金について

税金は、パートナーダッシュボードの　「設定」 ぺージで指定されたビジネスアドレスに応じて自動的に請求されます。もしあなたが、広告の購入に税金が適用される地域に住んでいるのであれば、請求書に税金が表示されます。「Shopify Inc」はカナダを拠点とする企業で、Shopify が税金を請求する際に使用されます。

パートナーダッシュボードの 「設定」>「請求書」 でメモとして追加することで、請求書に VAT や納税番号を記載することができます。

title: "【Shopify.dev 和訳】Apps/Checkout/Shipping method/Localization"
emoji: "💳"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: [shopify, apps]
published: true

この記事について

この記事は、Localization for shipping methods scriptsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

配送方法に関するスクリプトのローカライズ

スクリプトで支払い方法や配送方法の名前をローカライズして、複数の言語や文化に対応している店舗でこれらのスクリプトを利用することができます。

仕組み

翻訳された文字列をスクリプトにハードコーディングするのではなく、ストアがサポートするロケールごとに個別のリソースファイルを作成します。これらのロケールファイルに、翻訳キーと翻訳値を入力します。翻訳された値は、スクリプトがプッシュされたときに含まれます。

このスクリプトがチェックアウト時に実行されると、注文のロケールを読み取り、お客様の希望する言語でメソッド名を提供します。

ロケールファイルとは、スクリプトで使用されるテキスト文字列の翻訳セットを含む JSON ファイルのことです。ロケールファイルは、ストアがサポートするすべての言語ごとに必要です。デフォルトのロケールファイルはありません。代わりに、スクリプトがロケールをサポートしていない場合は、翻訳キーの名前がデフォルト値として使用されます。

ロケールファイルの作成

  1. 依存関係にある @shopify/i18n-as をインストールします。

  2. スクリプトプロジェクトでは、すべてのロケールファイルを格納するために、次のサブディレクトリを作成します： locales/

  3. ロケール設定ファイル（i18n.config.json）を作成します。:

    • プロジェクトのルートディレクトリに、手動でファイルを作成し、i18n.config.jsonという名前をつけます。
    • このファイルを開き、以下のコードを追加します。:
    i18n.config.json
    {
  "localeFilesDirectory": "./locales"
}

    ロケールファイルを置くディレクトリを設定します。

  4. ストアがサポートする各言語および方言のロケールファイルを作成します。

    • 手動でファイルを作成し、標準的なIETF 言語タグフォーマットを使用してファイル名を付けます。最初のサブタグには 2 文字の言語コード（ISO 639-1）、2 番目のサブタグには 2 文字の国コード（ISO 3166-1 alpha-2）を大文字で記述します。
      例えば、「フランス語-カナダ」の場合はfr-CA.json、「英語-グレートブリテン」の場合はen-GB.json、「フィンランド-全地域」の場合はfi.jsonとなります。

    • ファイルに翻訳キーを追加する。keyフィールドは、翻訳可能なコンテンツとその翻訳値を関連付けます。valueフィールドには、翻訳可能なコンテンツそのものが表示されます。

    例えば、en.json の場合:

    locales/en.json
    {
  "key": "value",
  "Renamed method": "Renamed method"
}

    例えば、fr.json の場合：

    locales/fr.json
    {
  "key": "valeur",
  "Renamed method": "Méthode renommée"
}

    与えられたキーの値がない場合や、サポートされていないロケールがスクリプトに渡された場合、キーの名前が翻訳値として使用されます。翻訳キーの名前は、デフォルトの翻訳値と同じになるように設定してください。

    例えば、ある店舗が英語、フランス語、ポルトガル語のロケールをサポートしているとします。スクリプトでtranslate(locale, "Rename Method")を呼び出したところ、英語とフランス語のロケールファイルしかありませんでした。ロケールがポルトガルの場合、チェックアウト時にRename Methodが顧客に表示されます。

スクリプトに翻訳キーを追加

Pament methodsとShipping methodsの両 API は、以下のような機能を持っています。

  • 注文のロケールをPurchaseProposal.localeで入力します。
  • リネームされたメソッドをResult.renameResponseで出力する。
  1. スクリプトの中で、@shopify/as-i18n をインポートします。
    例えば、以下のようになります。
    src/script.ts
    import { translate } from '@shopify/i18n'
  2. 翻訳を使用したい場所では、translate(locale, "key-name")と入力します。
    例えば、以下のようになります
    src/script.ts
    Console.log(translate(locale, "my_key_to_translate"));

テストロケール

翻訳を使用するスクリプトのユニットテストを作成する際には、翻訳文字列をチェックするテストを含めてください。

  1. localeをテスト関数の入力として含める。

    例えば、.setLocale(locale)を
    Domain.TestHelper.PurchaseProposalBuilder.TestHelperに含めます。

    test/script.spec.ts
    function createPurchaseProposal(locale: string):
Domain.PurchaseProposal {
  return new Domain.TestHelper.PurchaseProposalBuilder()
    .setLines([
  ...
    ])
    // ロケールを入力として含める
    .setLocale(locale)
    .build();
}

  2. 翻訳された文字列の出力をチェックするテストを書く。

    例えば、

    test/script.spec.ts
    // ***** 英語の翻訳を利用する *****
result = paymentMethodsHandler(
  new PaymentMethods.Input(createPurchaseProposal('en'), paymentMethods),
  config,
);

expect(result.renameResponse!.renameProposals.length).toBe(1);
expect(result.renameResponse!.renameProposals[0].name).toBe('This is your renamed payment method.');

// ***** フランス語の翻訳を利用する *****
result = paymentMethodsHandler(
  new PaymentMethods.Input(createPurchaseProposal('fr'), paymentMethods),
  config,
);

expect(result.renameResponse!.renameProposals.length).toBe(1);
expect(result.renameResponse!.renameProposals[0].name).toBe('Ceci est votre mode de paiement renommé.');

例

ローカライズを使用したスクリプトの例を以下に示します。

src/script.ts
...
  import { translate } from '@shopify/as-i18n';

  export function paymentMethodsHandler(
    input: PaymentMethods.Input,
    configuration: Configuration,
  ): PaymentMethods.Result {
    //注文のロケールを格納するconstを定義する
    const locale = input.purchaseProposal.locale;

    const sortResponse = new PaymentMethods.SortResponse(input.paymentMethods);
    const filterResponse = new PaymentMethods.FilterResponse([]);
    //ロケールと支払い方法を指定してrenameFirstPaymentMethodを呼び出す
    const renameResponse = renameFirstPaymentMethod(locale, input.paymentMethods);

    return new PaymentMethods.Result(sortResponse, filterResponse, renameResponse);
  }

  function renameFirstPaymentMethod(locale: string, paymentMethods: Domain.PaymentMethod[]): PaymentMethods.RenameResponse {
    var renameProposals = new Array<PaymentMethods.RenameProposal>();

    if (paymentMethods.length > 0) {
      //注文のロケールに基づいて、支払い方法の名前を変更する
      const renameProposal = PaymentMethods.RenameProposal.rename(paymentMethods[0], translate(locale, "Renamed method"));
      renameProposals.push(renameProposal);
    }

    return new PaymentMethods.RenameResponse(renameProposals);
  }

次のステップ

  • Shopify のチェックアウト時に顧客に表示される支払い方法を変更。
  • Shopify のチェックアウト時に顧客に表示される配送方法を変更。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます