Googleタグマネージャーで WEBサイトの各ページに「文字列」を表示する。

Googleタグマネージャーを利用すれば、各ページや特定のページに

「文字列」を表示することが出来ます。

但し、下記の条件があります。

WEBサイトにGoogleタグマネージャーが設定されていること！

こちらが Googleタグマネージャー設定後にWEBサイトに表示したキャプチャーです。
Googleタグマネージャーでの設定方法

こちらが Googleタグマネージャー設定後にWEBサイトに表示したキャプチャーです。

文字列「太郎さん、」をH1タグの要素の文字列に追加しています。

WEBサイトのソースコードを見てみると

「太郎さん、」の表示はありません。これは、javascriptで動的に文字列を表示しているためです。

Googleタグマネージャーでの設定方法

具体的にどのようにして表示させているか説明します。

＜手順１＞タグマネージャーにログインします。

＜手順２＞「タグの設定」を新規で作成します。

＜手順３＞「HTML」の部分にJavascriptを記述します。

Javascriptは非常に簡単です。Jqueryを利用しますので、WEBサイトでjQueryが利用できていることが必要です。コードの説明をしますと、H1要素が現れたら、「太郎さん、」をはじめに挿入してください、という命令になります。

<script>

    $(function(){
        $('H1').prepend('太郎さん、');
    });

</script>

なので、 H1要素でなくてもH2要素や、Class指定、ID指定などのセレクタに対して指示できるのです。また、今回は、 prepend というメソッドを使用しましたが、下記のようにフォントの色を変更したりもできます。

$(‘p’).css(‘color’, ‘#f00’);

できることは無限大に広がります！

あと、Googleタグマネージャーの重要なところで「トリガー」設定があります。

これは、日本語にしますと「引き金」つまりどこでこの「太郎さん、」を表示させるか反映する範囲を聞いています。今回の場合、すべてのWEBサイトのH1要素に対してということですので下記のようにAll Pagesになります。こちらは、正規表現などを利用して特定のページにすることもできますのでいろいろ試してみてください！