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のウィジェットを挿入することも可能です。
詳細やご不明点は、このページの右下のチャットサポートかCSチームにお問い合わせくださいませ。