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

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

## はじめに
Javascript実行の確認に、Chrome Developer Tools（デベロッパーツール）のConsoleを使用しています。ページ上で`右クリック`->`検証`、もしくは`option`+`command`+`i`でデベロッパーツールを開き、`Console`タブをクリックすると開きます。
![console.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408807/7b756fff-e59e-244b-d1a0-4e64539947a4.gif)


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

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

#### 1. document.createElement で挿入したいHTML要素（親ノード）を作成
var 任意の変数名 = document.createElement('HTML要素');
div要素を生成します。

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

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

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

#### 3. createTextNode テキストノード（子ノード）を作成
var 任意の変数名 = document.createTextNode("挿入したいテキスト内容");

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

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

```javascript:HTML
var newCont = newDiv.appendChild(newContent);
```

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

```javascript:HTML
var newDiv = document.createElement('div');
newDiv.style.cssText = "font-size: 12px; color: #f00;";
var newContent = document.createTextNode("GTMでテキスト追加");
newDiv.appendChild(newContent);
```
Chromeのデベロッパーツールで確認
newDivを実行すると、作成したい要素が生成されているのがわかります。
![newDiv.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408807/0ac893ce-3916-531e-9509-c4665c41543e.gif)



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

#### テキストを挿入したい場所
以下の場所に、コンテンツを追加したいとします。
![aaa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408807/5b18cf0e-1039-f679-faf5-924264513bee.jpeg)


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

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

Chromeのデベロッパーツールで確認（例）
parentを実行すると、表示させたい場所の親要素 \<ul class="menu">\</ul> が取得できているのがわかります。
![parent.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408807/7cf0b6f9-edd2-bb91-a32c-27d60d9ce44f.jpeg)


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

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

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

```javascript:HTML
//newDivをparentに挿入
newDiv.appendChild(newContent);
```
これで特定の場所に作成したエレメントを挿入できます。

## まとめ

```javascript: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のデベロッパーツールで確認
きちんと挿入されています。
![appendChild_cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408807/95eb37b3-3b24-67ed-46e6-e8e91cf2ce53.gif)

デベロッパーツールのブラウザ側の表示
<img width="265" alt="appear.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408807/17c51c02-b696-a7f8-7d87-bd965dc329f7.png">

## GTMのカスタムHTMLで配信する場合
以下のように`<script></script>`で囲ってください。

```HTML
<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>
```

おわり。