【Googleタグマネージャ】カスタムHTMLタグで、スマホ時のみ表示
今回はカスタムHTMLタグを使って、スマホ時（画面幅769px以下くらい）のみ何か表示する場合の紹介です。また、ページのHTMLファイルは触らず、GTM上だけの設定で一応できます。
ひとまず、「スマホ時のみ、あるページのテキストの後に何かテキスト表示」という感じのやつをやってみます。
とりあえず、こんなテストページを用意しました。
このテストページのHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テスト</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- ここにGTMコードが入ります -->
<div data-role="page">
<div data-role="header">
<h1>テスト</h1>
</div>
<div role="main" class="ui-content">
<h2>テストページ</h2>
<p class="text">ああああああ</p>
</div>
</div>
</body>
</html>
このページの「ああああああ」の後に、「aaaaaaaa」というテキストをスマホの時だけ出したいと思います。
新規タグを作成していきます。
「カスタムHTMLタグ」を選択し、HTMLには
<style>
@media screen and (min-width: 769px){
.sp_text{display:none;}
}
</style>
<script>
$('<p class="sp_text">aaaaaaaa</p>').insertAfter('.ui-content p.text');
</script>
を入れました。
ページ内の「<p class="text">ああああああ</p>」の後に、「<p class="sp_text">aaaaaaaa</p>」が挿入されるようにしてます。
また画面幅769px以上の時は、「<p class="sp_text">aaaaaaaa</p>」を隠すようにしてます。これで、画面幅768px以下の時は「aaaaaaaa」が表示されるようになります。
後はタグを配信するタイミング（ページURL）を設定し、タグ保存。公開。
スマホでテストページを確認すると、
「ああああああ」の後に、「aaaaaaaa」というテキストが表示されてます。
PC（画面幅769px以上）の時も確認しましたが、表示されてませんでした。
あと配信するタイミング（ページURL）で作成したトリガーですが、
トリガーのタイプをデフォルトの「ページビュー」にしていると、Firefoxだと完璧にできたけど、IE、クロームだとPCの状態で微妙に「aaaaaaaa」が一瞬出てしまうみたいなことがあるので、「DOM Ready」か「ウィンドウの読み込み」等にして調整してみてください。
勝手にスマホサイトまとめ｜スマホサイトとjQueryMobileのまとめ
勝手にリスティング広告まとめ｜テキスト・イメージ広告、ランディングページまとめ
