Shopify の Debut テーマに広告コンバージョンタグを設置する
こんにちは、 Gaji-Labo 横田です。Eコマース用のプラットフォームである Shopify によるサイト構築で、Debut テーマにおける Yahoo! 、Google、Facebook 等の広告コンバージョンタグの設置場所を紹介します。
全ページで発火させたいタグ
Yahoo! のサイトジェネラルタグ、Google のグローバルサイトタグ、Facebook のピクセルなど、全ページで発火させたいコンバージョンタグは、Debut テーマの layout/theme.liquid に追記をします。
媒体ごとに指定された箇所（<head> 直後、</head> 直前など）に設置します。
<head>
<!-- Yahoo -->
<script>
設置タグ
</script>
.
.
.
<!-- Global site tag (gtag.js) - Google Ads: -->
<script>
設置タグ
</script>
<!-- Facebook Pixel Code -->
<script>
設置タグ
</script>
<!-- End Facebook Pixel Code -->
</head>カート追加時に発火させたいタグ
Yahoo! のコンバージョンタグ、Google のコンバージョンタグ、Facebook のイベントタグなど、カート追加ボタンを押した際に発火させたいタグは Debut テーマの sections/product-template.liquid に追記をします。コード例のように、クリックイベント処理でトラッキングが実行されるよう、ひとつの script タグの中にまとめて設置します。
<button type="submit" name="add" id="addToCartButton"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"
{% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
.
.
.
<script type="text/javascript" async>
if (document.getElementById('addToCartButton')) {
document.getElementById('addToCartButton').addEventListener("click", function() {
ytag({
コンバージョンタグ
});
gtag(コンバージョンタグ);
fbq(イベントタグ);
});
}
</script>
{% schema %}購入完了ページで発火させたいタグ
Yahoo! のコンバージョンタグ、Google のコンバージョンタグ、Facebook のイベントタグなど、購入完了ページのみで発火させたいタグは Shopify の管理画面よりチェックアウトに入り、追加スクリプト欄に追記をします。
詳しくは、石垣の記事「Shopify の注文完了ページにコンバージョンタグなどのスクリプトを埋め込む」をご参照ください。
まとめ
今回は Shopify のDebut テーマで Yahoo! 、Google、Facebook の広告コンバージョンタグの設置場所をまとめました。
Shopify を使っている方の参考にしていただければと思います。
弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
