Google タグマネージャで任意の場所にテキストを表示する方法

コンバージョンページが存在せず、会員登録後「プロフィール」ページに遷移するサイトの例です。

メッセージを表示させる条件を調べます。この例は、「プロフィール」ページで、リファラが「subscription」ページです。

Google タグマネージャで新規トリガーを作成します。

条件通りにトリガーを指定します。

イベント:ページビュー
トリガーのタイプ:DOM Ready
配信するタイミング:Referrer: 「/subscription/」を含む
         Page URL: 「/profile/」を含む

タグマネージャの設定

タグを作成します

ページ上の表示したい場所をきめます。

「tetete さんの購読情報を変更する場合は〜」 の前に入れたいので、class名を特定します。

Chromeデベロッパーツールが便利です
Chromeデベロッパーツールが便利です

div要素のクラス名「wysiwyg」の前に表示します。

新規タグを作成します。わかりやすい名前を付けます。

プロダクトを選択:カスタムHTMLタグ
タグを設定:HTMLにJavaScriptを記入
配信するタイミング:先ほど設定したいトリガーを指定

タグを設定

<script>
    $ ('div.wysiwyg').prepend('WPJヘのお申し込み、ありがとうございました。<br>「パスワード」を設定して「プロフィール情報を更新する」をクリックしてください。');
</script>

上記は単純なテキスト表示ですが、色を変えたり太字にするなど工夫しました。

テキスト表示成功!

jQueryの書き方はこちらの本が参考になりましたよ。

jQueryはまだまだ苦手ですが、「特定の要素の前に追加する」は、こちらの書籍を参考にしました。