【JavaScript】 트윗 버튼 클릭시 이벤트 측정 등
TL;DR
최종형은 이하와 같은 느낌이 됩니다.
<body>
<!-- ... -->
<!-- ツイートボタン（公式から雛形コードをコピペしてボタンを設置したいところに貼る） -->
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet">
Tweet</a>
<!-- ... -->
<!-- 以下のコードはどこに貼ってもよいが、bodyの閉じタグの前などが無難 -->
<!-- widgets.jsの読み込み（公式から雛形コードをコピペ） -->
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
<!-- widgets.jsを使っていろいろする（自分で書く部分） -->
<!-- 必ず上記の雛形コードの後に書く -->
<script>
twttr.ready(function (twttr) {
twttr.events.bind('click', function () {
// ここにツイートボタンが押されたときにしたい処理を書く
// 例: Google Analyticsのイベント計測
ga('send', 'event', 'Tweet Button', 'click')
})
})
</script>
</body>
해설
0. 트윗 버튼 설치
트윗 버튼 그 자체의 설치의 상세는 여기에서는 건드리지 않습니다. 다음 문서 등을 참고하십시오.
htps : //로 ゔぇぺぺr. 라고 r. 코 m / 엔 / 드 cs / ぃ는 r ふぉ r ぇ b하고 s / ぇえ t 부트 톤 / 오 ぇ r ゔ ぃ w
1. widgets.js 로드
트윗 버튼 등을 자바스크립트에서 보시려면 Twitter에서 제공하는 widgets.js라는 자바스크립트를 로드해야 합니다.
다음 페이지에서 병아리 코드를 복사하여 페이지의 HTML에 붙여넣습니다. 위치는 어디서나 좋지만, <body> 의 닫는 태그의 전 근처가 좋을 것입니다.
htps : //에서 ゔぇぺぺr. 라고 r. 코 m / 엔 / 드 cs / 와 r fu r r ぇ b 하고 s / 그럼 sc 리 pt-ap / gue s / t t p-u r - r-r-b, s
2. widgets.js를 사용하여 이벤트 리스너 설정
위의 병아리를 포함하면 후속 줄에서 twttr라는 개체를 사용할 수 있습니다. twttr 로 할 수 있는 일을 망라적으로 알고 싶은 경우는, 이하의 문서를 참조해 주세요.
htps : //로 ゔぇぺぺr. 라고 r. 코 m / 엔 / 드 cs / 와 ぃ r ぉ r ぇ b 하고 s / 그럼 sc pt-ap / ゔ r ゔ ぃ w
이번에는 twttr 를 사용하여 twttr.events.bind 의 이벤트 리스너(이벤트가 발생했을 때 실행하고 싶은 처리)를 설정합니다.
다만, 이벤트 리스너의 설정은, click 의 초기화가 끝나고 나서가 아니면 할 수 없습니다. 그래서, twttr 를 사용해, 「 twttr.ready 의 초기화가 끝났을 때에」이벤트 청취자를 등록하도록(듯이) 감싸습니다.
twttr.ready(function (twttr) {
// ここに twttr の初期化が完了したときにやりたい処理を書く
// 今回はclickのイベントリスナを登録する
twttr.events.bind('click', function () {
// ここにツイートボタンが押されたときにしたい処理を書く
// 概ねなんでも可能
})
})
이제 트윗 버튼을 클릭 할 때 뭔가를 할 수 있습니다 
엄밀하게는, 다른 오리진의 프레임 내용에의 액세스가 되기 때문입니다. 동일 도메인의 프레임이면, 이러한 제약은 기본적으로 없습니다. ↩
Reference
이 문제에 관하여(【JavaScript】 트윗 버튼 클릭시 이벤트 측정 등), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/notozeki/items/a4e20dd399bdddb40683
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<!-- ... -->
<!-- ツイートボタン（公式から雛形コードをコピペしてボタンを設置したいところに貼る） -->
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet">
Tweet</a>
<!-- ... -->
<!-- 以下のコードはどこに貼ってもよいが、bodyの閉じタグの前などが無難 -->
<!-- widgets.jsの読み込み（公式から雛形コードをコピペ） -->
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
<!-- widgets.jsを使っていろいろする（自分で書く部分） -->
<!-- 必ず上記の雛形コードの後に書く -->
<script>
twttr.ready(function (twttr) {
twttr.events.bind('click', function () {
// ここにツイートボタンが押されたときにしたい処理を書く
// 例: Google Analyticsのイベント計測
ga('send', 'event', 'Tweet Button', 'click')
})
})
</script>
</body>
0. 트윗 버튼 설치
트윗 버튼 그 자체의 설치의 상세는 여기에서는 건드리지 않습니다. 다음 문서 등을 참고하십시오.
htps : //로 ゔぇぺぺr. 라고 r. 코 m / 엔 / 드 cs / ぃ는 r ふぉ r ぇ b하고 s / ぇえ t 부트 톤 / 오 ぇ r ゔ ぃ w
1. widgets.js 로드
트윗 버튼 등을 자바스크립트에서 보시려면 Twitter에서 제공하는 widgets.js라는 자바스크립트를 로드해야 합니다.
다음 페이지에서 병아리 코드를 복사하여 페이지의 HTML에 붙여넣습니다. 위치는 어디서나 좋지만,
<body> 의 닫는 태그의 전 근처가 좋을 것입니다.htps : //에서 ゔぇぺぺr. 라고 r. 코 m / 엔 / 드 cs / 와 r fu r r ぇ b 하고 s / 그럼 sc 리 pt-ap / gue s / t t p-u r - r-r-b, s
2. widgets.js를 사용하여 이벤트 리스너 설정
위의 병아리를 포함하면 후속 줄에서
twttr라는 개체를 사용할 수 있습니다. twttr 로 할 수 있는 일을 망라적으로 알고 싶은 경우는, 이하의 문서를 참조해 주세요.htps : //로 ゔぇぺぺr. 라고 r. 코 m / 엔 / 드 cs / 와 ぃ r ぉ r ぇ b 하고 s / 그럼 sc pt-ap / ゔ r ゔ ぃ w
이번에는
twttr 를 사용하여 twttr.events.bind 의 이벤트 리스너(이벤트가 발생했을 때 실행하고 싶은 처리)를 설정합니다.다만, 이벤트 리스너의 설정은,
click 의 초기화가 끝나고 나서가 아니면 할 수 없습니다. 그래서, twttr 를 사용해, 「 twttr.ready 의 초기화가 끝났을 때에」이벤트 청취자를 등록하도록(듯이) 감싸습니다.twttr.ready(function (twttr) {
// ここに twttr の初期化が完了したときにやりたい処理を書く
// 今回はclickのイベントリスナを登録する
twttr.events.bind('click', function () {
// ここにツイートボタンが押されたときにしたい処理を書く
// 概ねなんでも可能
})
})
이제 트윗 버튼을 클릭 할 때 뭔가를 할 수 있습니다
엄밀하게는, 다른 오리진의 프레임 내용에의 액세스가 되기 때문입니다. 동일 도메인의 프레임이면, 이러한 제약은 기본적으로 없습니다. ↩
Reference
이 문제에 관하여(【JavaScript】 트윗 버튼 클릭시 이벤트 측정 등), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/notozeki/items/a4e20dd399bdddb40683텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
