目次
本記事について
本記事では、b→dashで作成したフォームにGTMタグを設置する方法について紹介します。
GTMで管理しているタグ（例：Google Analyticsタグなど）を、b→dashで作成したフォームに埋め込みたい場合は、本記事で説明している以下3つの手順を参照ください。
・GTMタグを記載したファイルを準備する
・GTMタグを記載したファイルをアップロードする
・GTMタグを記載したファイルをフォームに設置する
GTMタグを記載したファイルを準備する
❶ GTMにログインし、GTMタグのコードを確認する
GTMにログインして、以下2種類のコードを確認ください。
・『<head>内の上部に設置するコード』
・『開始タグ <body> の直後に設置するコード』
❷ 2種類のコードを1つにまとめた「HTMLファイル」を準備する
『<head>内の上部に設置するコード』と『開始タグ <body> の直後に設置するコード』の2種類のコードを1つにまとめた「HTMLファイル」を準備するようお願いします。以下では、2種類のコードを1つにまとめた、「HTMLファイル」をChromeを利用して作成する方法を一例として紹介します。
Googleブラウザを開きます
キーボードの「F12」キーを押下し、Chromeデベロッパーツールを開きます
「ソース」パネルをクリックします
「＞＞」をクリックします
「スニペット」をクリックします
「新しいスニペット」をクリックします
任意のファイル名を入力します
今回は「GTMタグ」と入力します。
「❶ GTMにログインし、GTMタグのコードを確認する」で確認した2つのコードを貼り付けます
「GTMタグ」を右クリックし、「名前を付けて保存」を選択します
拡張子を「.js」から「.html」に変更し、「保存」をクリックします
GTMタグを保存する際のファイルの拡張子は、デフォルトの設定で「.js」になっていますが、必ず拡張子を「.html」に変更し、「HTMLファイル」として保存するようお願いします。
拡張子を変更せずに「JavaScriptファイル」としてb→dashに設定した場合、GTMのタグが発火しない可能性がありますので、「HTMLファイル」として保存してください。
「htmlファイル」として保存した「GTMタグ.html」ファイルを選択し、右クリックします
「プログラムから開く」をクリックします
ファイルを開くプログラムを選択します
今回は、「メモ帳（テキストエディタ）」で開きます。
2種類のコードが記載されていることが確認できます
GTMタグを記載したファイルをアップロードする
「❷ GTMタグを記載したファイルを準備する」で作成した「htmlファイル」をb→dashにアップロードします。
「コンテンツボックス」をクリックします
「新規作成」をクリックします
「コンテンツデータをアップロードする」を選択し、「適用」をクリックします
「GTMタグ」が記載された「HTMLファイル」を選択し、「開く」をクリックします
一覧にアップロードしたコンテンツが表示されます
GTMタグを記載したファイルをフォームに設置する
「❸ GTMタグを記載したファイルをアップロードする」で、b→dashにアップロードした「htmlファイル」を、GTMタグを設置したい対象のフォームに設置します。
「CMS」をクリックします
GTMタグを設置したいフォームをクリックします
「編集」アイコンをクリックします
画面右上の「HTML/CSSファイルの適用」をクリックします
「ヘッダーHTML」の「ファイル選択」をクリックします
「❷GTMタグをb→dashにアップロードする」でアップロードした「GTMタグ」を選択し、「適用」をクリックします
「適用」をクリックします
「次へ」をクリックします
任意のファイル名を入力し、「保存」をクリックします
今回は「GTM埋め込みフォーム」と入力します。
一覧に編集したフォームが表示されます
