JavascriptでGTM配信用のエレメントを作成

GTMでコンテンツ配信した際の覚書きです。

はじめに

Javascript実行の確認に、Chrome Developer Tools（デベロッパーツール）のConsoleを使用しています。ページ上で右クリック->検証、もしくはoption+command+iでデベロッパーツールを開き、Consoleタブをクリックすると開きます。

挿入したいエレメント（コンテンツ）を作成

挿入したいエレメント（コンテンツ）をjavascriptを使って作成していきます。
今回は、以下の要素をページの特定の場所に挿入します。

<div style="margin: 0px 10px 20px; font-size: 12px;">GTMでテキスト追加</div>

1. document.createElement で挿入したいHTML要素（親ノード）を作成

var 任意の変数名 = document.createElement('HTML要素');
div要素を生成します。

HTML

//div要素を作成
var newDiv = document.createElement('div');

2. cssText 作成したHTML要素にスタイルを当てる

style.cssText を使うと、createElementで作成したHTML要素にスタイルを当てることができます。

HTML

//任意のスタイルを設定
newDiv.style.cssText = "font-size: 12px; color: #f00;";

3. createTextNode テキストノード（子ノード）を作成

var 任意の変数名 = document.createTextNode("挿入したいテキスト内容");

HTML

//表示したいテキスト内容を記述
var newContent = document.createTextNode("GTMでテキスト追加");

4. Node.appendChild()メソッド

①の親ノードに、③の子ノードを入れ込みます。
var 任意の変数名 = element.appendChild(aChild);

HTML

var newCont = newDiv.appendChild(newContent);

5. 1〜4を実行してみる

HTML

var newDiv = document.createElement('div');
newDiv.style.cssText = "font-size: 12px; color: #f00;";
var newContent = document.createTextNode("GTMでテキスト追加");
newDiv.appendChild(newContent);

Chromeのデベロッパーツールで確認
newDivを実行すると、作成したい要素が生成されているのがわかります。

挿入したい場所を取得

実際に配信したい場所を、Javascriptを使って取得していきます。

テキストを挿入したい場所

以下の場所に、コンテンツを追加したいとします。

querySelector()メソッド

指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。

HTML

// コンテンツを挿入する場所を取得
var parent = document.querySelector('div.cont-box > ul.menu');

Chromeのデベロッパーツールで確認（例）
parentを実行すると、表示させたい場所の親要素 <ul class="menu"></ul> が取得できているのがわかります。

エレメントを、取得した場所に挿入

appendChild()メソッド

特定の親ノードの子ノードリストの末尾にノードを追加します。
var aChild = element.appendChild(aChild);

appendChild()メソッドで、先ほど取得した変数 newDiv を、取得した親要素 parentに挿入します。

HTML

//newDivをparentに挿入
newDiv.appendChild(newContent);

これで特定の場所に作成したエレメントを挿入できます。

まとめ

HTML

//エレメントの作成
var newDiv = document.createElement('div');
newDiv.style.cssText = "font-size: 12px; color: #f00;";
var newContent = document.createTextNode("GTMでテキスト追加");
newDiv.appendChild(newContent);

//ページ内の挿入したい場所を取得
var parent = document.querySelector('div.cont-box > ul.menu');

//取得した場所にエレメントを挿入
parent.appendChild(newDiv);

Chromeのデベロッパーツールで確認
きちんと挿入されています。

デベロッパーツールのブラウザ側の表示

GTMのカスタムHTMLで配信する場合

以下のように<script></script>で囲ってください。

<script>
  //エレメントの作成
  var newDiv = document.createElement('div');
  newDiv.style.cssText = "font-size: 12px; color: #f00;";
  var newContent = document.createTextNode("GTMでテキスト追加");
  newDiv.appendChild(newContent);
  //ページ内の挿入したい場所を取得
  var parent = document.querySelector('div.cont-box > ul.menu');
  //取得した場所にエレメントを挿入
  parent.appendChild(newDiv);
</script>

おわり。