Pardotフォームで離脱の原因を見つけるために、
フォームのレイアウトテンプレートに、 GTMタグ、Clarityタグを埋め込みたいです。
ベストプラクティスさまが無料提供されている
下記のレイアウトテンプレートを活用しています。
この中に、どの位置にGTMタグ、Clarityタグを埋め込めば良いかを
アドバイスいただけますと幸いです。
--------------
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Pardotフォームテンプレート（Bootstrap版）-->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="%%description%%">
<title>%%title%%</title>
<!-- Bootstrap CDN参照-->
<!-- version 4.5--><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Google Font読み込み-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap">
<style>
/* ##### レイアウト共通スタイル ##### */
/* ### フォント設定 | Noto Sans JPを指定 */
body, input, select, textarea { font-family:'Noto Sans JP',sans-serif,system-ui; }
/* ### リンク */
a:link, a:visited { color:#004196; }
a:hover, a:active { color:#005cd3; }
/* ### ボタン（.btn-primaryの置き換え） */
.tplbp-bootstrap4 .btn-primary { background-color:#004196; border-color:transparent; }
.tplbp-bootstrap4 .btn-primary:link, .tplbp-bootstrap4 .btn-primary:visited { background-color:#004196; border-color:transparent; }
.tplbp-bootstrap4 .btn-primary:hover, .tplbp-bootstrap4 .btn-primary:active, .tplbp-bootstrap4 .btn-primary:focus { background-color:#005cd3; border-color:transparent; }
.tplbp-bootstrap4 .btn-primary:disabled { opacity:40% !important; background-color:#005cd3 !important; border-color:transparent !important; }
/* ### 項目ラベル */
.tplbp-bootstrap4 label.form-label { font-weight:700; }
/* ### small */
.tplbp-bootstrap4 small { font-size:.875em; }
/* ### チェックボックス／ラジオボタン */
.tplbp-bootstrap4 .custom-control-input:checked ~ .custom-control-label::before { background-color:#004196; border-color:#004196; }
.tplbp-bootstrap4 .pd-checkbox span.value, .tplbp-bootstrap4 .pd-radio span.value { display:block; overflow:hidden; }
.tplbp-bootstrap4 .pd-checkbox span.value > span, .tplbp-bootstrap4 .pd-radio span.value > span { margin-right:1.25em; }
/* ### 必須項目 */
.tplbp-bootstrap4 .form-field.required .form-label::after, .tplbp-bootstrap4 .form-field.required .col-form-label::after { content:'必須'; margin-left:.5em; font-size:.875em; color:#dc3545; }
/* ### エラー表示 */
.tplbp-bootstrap4 .errors { margin-bottom:2em; padding:1em; border:solid 2px #dc3545; color:#dc3545; }
.tplbp-bootstrap4 .form-text.error { color:#dc3545; }
/* ### Date-Picker対応 */
#ui-datepicker-div { display:none; }
.ui-datepicker.ui-widget { padding:.5rem .75rem; background:#FFFFFF; border:solid 1px #aaaaaa; border-radius:.25rem; box-shadow:2px 2px 4px 0 rgba(0, 0, 0, 0.2); }
.ui-datepicker.ui-widget .ui-datepicker-header { display:flex; flex-wrap:wrap; font-size:.9rem; }
.ui-datepicker.ui-widget .ui-datepicker-header a.ui-datepicker-prev, .ui-datepicker.ui-widget .ui-datepicker-header a.ui-datepicker-next { color:#007bff; text-decoration:underline; }
.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-prev { width:50%; }
.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-next { width:50%; text-align:right; }
.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-title { display:flex; justify-content:center; margin-bottom:.3rem; width:100%; }
.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month { margin-right:.1rem; }
.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-title ui-datepicker-year { margin-left:.1rem; }
.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-title select { font-size:.9rem; }
.ui-datepicker.ui-widget table.ui-datepicker-calendar thead th { background:#999999; text-align:center; font-weight:normal; font-size:.9rem; color:#FFFFFF; }
.ui-datepicker.ui-widget table.ui-datepicker-calendar th.td { text-align:center; }
.ui-datepicker.ui-widget td a { display:block; padding:.1rem .25rem; text-align:center; }
.ui-datepicker.ui-widget td.ui-datepicker-week-end a { background:#FFDBC8; }
/* ##### テーブルレイアウト用スタイル ##### */
/* TH（フォーム項目ラベル）セルと、TD（入力エリア）セルの幅指定 */
form#pardot-form table th { width:25%; }
form#pardot-form table td { width:75%; }
/* フォーム項目ラベル セルの背景色 */
form#pardot-form table th { background-color:#f7f7f7; }
/* ##### スタイル ここまで ##### */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3 mb-3">
%%content%%
</div>
<script>
// ### Bootstrap用のClassを追加
// テキスト
$('input[type=text]').each(function () {
$(this).attr('class', $(this).attr('class') + ' text form-control');
});
// テキストエリア
$('textarea').attr('class', 'form-control');
// セレクトボックス
$('select').attr('class', 'form-control');
$('.pd-select select > option:first-child').append('選択してください'); // 最初の選択肢に、文言を追加
// チェックボックス
$('.pd-checkbox span.value > span').attr('class', 'custom-control custom-checkbox');
$('input[type=checkbox]').attr('class', 'custom-control-input');
$('.pd-checkbox span.value > span > label').attr('class', 'custom-control-label');
// ラジオボタン
$('.pd-radio span.value > span').attr('class', 'custom-control custom-radio');
$('input[type=radio]').attr('class', 'custom-control-input');
$('.pd-radio span.value > span > label').attr('class', 'custom-control-label');// 送信ボタン処理
$('#pardot-form').submit(function () { $('#pardot-form :submit').prop('disabled', true); })
// プレースホルダのサンプル
// $('.first_name input').attr('placeholder','太郎'); // 例）first_name 項目に、「太郎」と表示
</script>
<!-- 作成：株式会社ベスト・プラクティス-->
<!-- https: //www.best-practice.co.jp/-->
</body>
</html>
