ウィジェットをクリックした時にHTMLの要素をクリックさせる方法 – ecコンシェルサポートサイト

どんな時に使えますか？

下記のような場合に利用をおすすめします。

ウィジェットをクリックした時に外部ツールを起動させたい

何ができますか？

通常、ウィジェットをクリックするとリンク先のページへ遷移するところを
ウィジェットをクリックした時にHTMLの要素をクリックさせることが可能です。

画像のように「ウィジェットをクリックした時に特定のボタンを押す」といったことができます。

設定手順

ウィジェットの設定
クリックさせたい要素を調べる

注意事項

本マニュアルの設定はスマートフォンとPCの両者に配信したい場合、
別々のキャンペーンを作成していただく必要があります。
その場合、PC用のキャンペーンとスマートフォン用のキャンペーンそれぞれで手順1.〜2.を行ってください。
スマートフォン用のサイトで手順2.を行う際は下記をご参照ください。

スマートフォン用のサイトで要素を取得する場合

備考

ウィジェットクリックでクリックさせるHTMLの要素のid名、class名がPCサイト、スマートフォンサイトで同一の場合は1つのキャンペーンで設定が可能です。下記リンクをご参照ください。

HTML要素にid属性またはclass属性がある場合

設定内容はサイトによって異なりますので、設定内容がご不明の場合はお気軽にサポートまでご相談ください。

1.ウィジェットの設定

管理画面のキャンペーン一覧からキャンペーンを選び、
編集する　＞　なにを　＞　ウィジェットの登録
と進み、対象ウィジェットの編集画面へ移動します。
ウィジェットの編集画面へ移動後、表示設定をクリックします。

ウィジェットのデザイン、表示設定のリンク先URLに下記スクリプトを記述します。

(このテキストをクリックすると下記コードをコピーできます)

javascript:var btn1 = document.querySelector('CSSセレクタ');var btn2 = document.getElementsByClassName("ec-concier-close-button");btn1.click();btn2[0].click()

赤字の部分にクリックしたい要素のCSSセレクタをコピーします。
※次の手順でCSSセレクタについて説明します。

2.クリックさせたい要素を調べる

GoogleChromeの検証ツールを使い「クリックさせたい要素」を取得します。
検証ツールの起動は下記のキーを入力することで可能です。
※Windows：F12
※Mac：option + command + i

検証ツールを起動後、画像の手順に従って設定を行ってください。
※スマートフォン用のサイトの場合はこちらを参照してください。

Copy selectorをクリックするとCSSセレクタがコピーされた状態になります。
コピーして得られた値を手順2.で設定したタグの下記赤字部分にペーストしてください。

(このテキストをクリックすると下記コードをコピーできます)

javascript:var btn1 = document.querySelector('この部分にペースト');var btn2 = document.getElementsByClassName("ec-concier-close-button");btn1.click();btn2[0].click()

その後、ウィジェットの編集を完了することで設定が完了します。
※正しく動作するかプレビュー機能等を利用して検証を行ってからキャンペーンを公開してください。

スマートフォン用のサイトで要素を取得する場合

検証ツールを起動した後に、下記画像の操作を行い手順2.を続けてください。

HTML要素にid属性またはclass属性が設定されている場合

クリックさせたいHTML要素にid属性またはclass属性が設定されている場合、id名class名で設定を行うことも可能です。
手順2.で選択した要素に下記のような記述があればid属性またはclass属性が設定されています。

id="id名"　　class="class名"

id属性がある場合

下記コードの赤字部分をHTML要素のid名で上書きしてご利用ください。
(このテキストをクリックすると下記コードをコピーできます)

javascript:var btn1 = document.getElementById("この部分にペースト");var btn2 = document.getElementsByClassName("ec-concier-close-button"); btn1.click();btn2[0].click()

class属性がある場合

下記コードの赤字部分をHTML要素のclass名で上書きしてご利用ください。
(このテキストをクリックすると下記コードをコピーできます)

javascript:var btn1 = document.getElementsByClassName("この部分にペースト");var btn2 = document.getElementsByClassName("ec-concier-close-button"); btn1[0].click();btn2[0].click()

コンソールエラーが出る場合

Uncaught TypeError: Cannot read property 'click' of null

上記のようなエラーが出る場合、CSSセレクタの設定を間違っている可能性があります。
その場合はコードが正しくコピーできているか、CSSセレクタが正しく取得できているか今一度ご確認ください。
コードの一部が削除されたり、CSSセレクタがシングルクォートで囲まれていない等がある場合正常に動作しません。

{[{category.name}]}