読者です 読者をやめる 読者になる 読者になる

【Googleタグマネージャ】カスタムHTMLタグで、スマホ時のみ表示

今回はカスタムHTMLタグを使って、スマホ時(画面幅769px以下くらい)のみ何か表示する場合の紹介です。また、ページのHTMLファイルは触らず、GTM上だけの設定で一応できます。

ひとまず、「スマホ時のみ、あるページのテキストの後に何かテキスト表示」という感じのやつをやってみます。

 

 とりあえず、こんなテストページを用意しました。

f:id:sumaho-design:20151201184431j:plain

 

このテストページの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」というテキストをスマホの時だけ出したいと思います。

新規タグを作成していきます。

 

f:id:sumaho-design:20151201184853j:plain

 

「カスタム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)を設定し、タグ保存。公開。
スマホでテストページを確認すると、

 

f:id:sumaho-design:20151201185415j:plain

 

「ああああああ」の後に、「aaaaaaaa」というテキストが表示されてます。
PC(画面幅769px以上)の時も確認しましたが、表示されてませんでした。

あと配信するタイミング(ページURL)で作成したトリガーですが、

 

f:id:sumaho-design:20151201185452j:plain

 

トリガーのタイプをデフォルトの「ページビュー」にしていると、Firefoxだと完璧にできたけど、IE、クロームだとPCの状態で微妙に「aaaaaaaa」が一瞬出てしまうみたいなことがあるので、「DOM Ready」か「ウィンドウの読み込み」等にして調整してみてください。

 

勝手にスマホサイトまとめ|スマホサイトとjQueryMobileのまとめ

勝手にリスティング広告まとめ|テキスト・イメージ広告、ランディングページまとめ