2021-05-27

Googleタグマネージャーを使用して、EmbedSocialウィジェットを埋め込む方法

EmbedSocialのウィジェットは、Googleタグマネージャーを使用して埋め込みを行うことも可能です。JavaScriptの埋め込みに対応していないCMSへの埋め込みや、サイト自体の編集を行うことなくSNSの投稿・レビューをWEBサイトへ表示させることができます。

※本記事で紹介する内容は、Googleタグマネージャーとの連携に必要なコードの埋め込みが完了していることが前提となります

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

1. Googleタグマネージャーの管理画面を開き、「新しいタグ」を選択します。

2. 「タグの設定」を選択します。

3. 「タグタイプを選択」の項目が表示されたのち、少し下にスクロールを行い「カスタム HTML」を選択します。

4. EmbedSocialの管理画面を開き、埋め込みを行うコードを取得します。

5. 取得したコードを、カスタムHTMLの項目にそのまま貼り付けます。
(次の6・7の設定を省略しても、EmbedSocialウィジェットの表示自体は可能です)

6. JavaScriptで操作が行えるように、貼り付けたコードをdivタグで囲みID(またはクラス名)を設定します。

7. 貼り付けたタグ最下段にあるscriptの閉じタグを改行し、EmbedSocialウィジェットを挿入する位置を指定するコードを記述します。

3行名 var element1 = document.getElementById(“element1”);

WEBサイトの中からウィジェットの埋め込みを希望する箇所のID(またはクラス名)を取得しています。

4行名 var embedsocial = document.getElementById(“embedsocial”);

「6」で命名したIDをもとに、EmbedSocialウィジェットを含む要素を取得しています。

5行名 element1.after(embedsocial);

WEBサイトから取得した埋め込み箇所の後ろにEmbedSocialのウィジェットを挿入しています。

8. 次に、トリガーを設定して表示させるページなどの設定を行います。

9. 右上の「+」マークから新しいトリガーを追加します。

10. トリガーの設定へと進みます。

11. 「トリガーのタイプを選択」の項目が表示されたのち、「ページビュー」を選択します。

12. トリガーの発生場所を一部のページに限定し、URLを指定することで希望のページで掲出させることができます。

13. トリガーの設定完了後自動的にページがリダイレクトし、「保存」を選択します。

14. 「公開」を選択して、設定完了です。

15. 以上の設定で、Googleタグマネージャー上で指定した「Element 1」の後ろにEmbedSocialのウィジェットが挿入されました。

16. 下記のようにJavaScriptの記述を「before」に変更することで、「Element 1」の前にEmbedSocialのウィジェットを挿入することも可能です。

疑問点は解決されましたか?

右下の『サポート』フォームよりご質問をいただくことができます。

ナレッジベースに戻る