[Shopify]メール内にQRコード埋込Google Chart APIがサポート終了！？代替方法をご紹介

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

Shopifyには通知メールの種類が豊富♪注文メールやその他のお知らせメールにクーポン情報やキャンペーンページのURLをQRコードで挿入可能なGoogle Chart APIを使用して埋め込んでいたのですが、このAPI がサポート終了になり使用できなくなる！？

実はこの話、2021年はじめに使えなくなるという噂だったのですが、2021年5月24日現在、まだ表示されています。あれ、まだ使えてるやん！！と思いつつ、非推奨となっているのでいつサポートが切れるか分からない状態。

代替方法はないのか？

あります！

今日はその代替方法をご紹介します。

✔︎Google Chart APIって何？

そもそも、Google Chart APIって何？

Googleが無料で提供しているチャート生成用のAPI です。簡単なコードを書くだけで、グラフが画像を挿入してるかのようにWeb上に表示されるオープンソースです。もっと詳しい説明は説明しているサイトが沢山あるので検索してみてください。

↓今まではこんな感じで1行書くだけで↓
QRコードが簡単にメール内に表示できていたわけです。

<img src="http://chart.apis.google.com/chart?cht=qr&chs=130x130&chl=https://note.com/tech_malin/n/n92654f5937c9">

ShopifyはHTMLメールなので、LINEにつなげたり、クーポンやキャンペーンなどの特集ページへ誘導したりする際に使えていたので便利だったのです。

✔︎代替方法

代替方法は手順は増えますが、難しくはありません。

↓前回ご紹介したこちらの手順を使うだけ↓

手順１　QRコード生成

ネット上で簡単にQRコードを生成できるサイトが沢山あるので、そちらでQRコードを作成し画像をダウンロードしてください。

形式はJPGでもPNGでもなんでもOKです。

手順２　QRコード画像をアップロード

管理画面＞設定＞ファイル＞ファイルをアップロード

今回はPNGでダウンロード。ファイル名を「qr」に変更しました。

qr.png

手順３　メール内にコードを挿入

Shopify管理画面＞設定＞通知から挿入したい通知テンプレートを開きます。

こちらのコードを挿入したい場所に挿入

<img src="{{ 'xxxx.png' | file_img_url: '130x' }}" />

※「xxxx.png」はアップロードしたファイル名を入れてください。jpegの場合は「xxxx.jpg」になります。

※後ろの「130x」は画像サイズです。小さくするなら「８０x」という感じでサイズ変更してみてください。

↓今回のケースはこちら↓

<img src="{{ 'qr.png' | file_img_url: '130x' }}" />

挿入後は保存し完了。

プレビューで確認してみてくださいね。

スマホで確認する人の方が多いかもしれませんが、PCでメール開いていただいたお客様に少しでも多くアプローチできるのでぜひお試しください。