サイトのトップへ戻る

Twitter 開発者 ドキュメント日本語訳

サイト内検索

Scripting: イベント

Twitter JavaScriptを使用すると、あなたは Developer Policy and Agreementへ同意したことになります。

TwitterのウィジットJavaScript は、初期化時やサイト閲覧者がウィジットを操作した後にイベントを発生させます。 Twitterのウィジットイベントをうまく活用することで、あなたのアプリケーションと分析精度を向上させます。

postMessage APIをサポートしていないブラウザでは、ウェブインテントのイベントは完全には機能しないので注意してください。

twttr.events.bindを使ってコールバック関数を登録することで、 JavaScriptコード内でTwitter ウィジットイベントの紐付けをします。

twttr.events.bind(
  'click',
  function (ev) {
    console.log(ev);
  }
);


Intent Event オブジェクト

ウェブインテントやウィジット内で検知可能なアクションが発生した場合、そのイベントを表すオブジェクトがJavaScript のコールバック関数に渡されます。 Intent Event オブジェクトには、後述するデータが含まれます:



Intent event オブジェクトプロパティ

target HTMLElement

ウィジットのインスタンスが作成されている DOM ノード。 たいていの場合は iframeですが、ウィジットの初期化に失敗した場合はオリジナルの埋め込みコードエレメントやその他サンドボックスエレメントとなることもあります。同一ページ上にある異なるインテントやボタンを区別するには、この値を使用してください。

region String

ウィジットのイベントが発生した場所を示す拡張詳細。例えば、 button or count components of Tweet button or Follow button integrations, or Tweet actions within an embedded Tweet.

サンプル値: tweetcount, follow, screen_name

data Object

ウェブインテントイベントに関連するキーと値の組み合わせ



イベントが発生した時

これらの各イベントにコールバック関数を紐付けることができます。ユーザー操作で対象のアクションが完了された時に、イベントが発生します。 いくつかのウェブインテントでは、複数のイベントが発生することがあります。— 例えば、ユーザーがツイートボタンを使ってツイートを投稿して最後に関連アカウントをフォローした場合は、 “tweet” と “follow” 両方のインテントイベントが発生します。

全てのブラウザでイベントが発生するわけではないの注意してください:ユーザーがウェブインテント内ではなくTwitterのiOSアプリやAndroidアプリ内で操作を完了させた場合、操作の完了イベントを受け取ることができません。 Click イベントは全てウィジット内で完結するようにしてください。



非同期リソースを待つ

widgets.js ファイルを非同期に読み込むと、イベントの紐付けを行う前に待ち時間が必要になります。: 読み込まれるまでは、呼び出した関数は存在しない状態になっています。 イベントの紐付けは、twttr.ready非同期関数キューのように全てが読み込まれた後で読み出されるコールバック関数内で行う必要があります。 後述するイベント例は全て、このコールバック関数内でイベントの紐付けを行うことを前提に書かれています。

twttr.ready(
  function (twttr) {
    // bind events here
  }
);


使用可能なEvents

loaded

twttr.widgets.load がページ内のウィジットを初期化した後に発生します。新しく作成されたウィジットノードへの参照の配列を含みます

twttr.events.bind(
  'loaded',
  function (event) {
    event.widgets.forEach(function (widget) {
      console.log("Created widget", widget.id);
    });
  }
);

rendered

ページ内の個々のウィジットが描写された後に発生します。新しく作成されたウィジットノードへの参照を含みます。loadedと同時に発生しますが、これは個々のウィジットごとに発生します。また、ファクトリー関数を使ってウィジットが作成された時にも発生します。

twttr.events.bind(
  'rendered',
  function (event) {
    console.log("Created widget", event.target.id);
  }
);

tweet

このイベントは、ユーザーがツイートウェブインテントを使ってツイートを投稿した時(新規投稿かリプライ)に発生します。

埋め込み型ツイートへのリプライツイートや、埋め込み型タイムライン内に表示されるツイートを含みます。

twttr.events.bind(
  'tweet',
  function (event) {
    // Do something there
  }
);

follow

このイベントでは、event オブジェクトのdata 引数内に保持されている、フォローされたユーザーの user_idscreen_name を取得することができます。

twttr.events.bind(
  'follow',
  function (event) {
    var followedUserId = event.data.user_id;
    var followedScreenName = event.data.screen_name;
  }
);

retweet

このイベントでは、event オブジェクトのdata 引数内に保持されている、リツイートされたオリジナルツイートのsource_tweet_id を取得することができます。

twttr.events.bind(
  'retweet',
  function(event) {
    var retweetedTweetId = event.data.source_tweet_id;
  }
);

favorite

このイベントでは、event オブジェクトのdata 引数内に保持されている、お気に入り登録されたツイートのtweet_id を取得することができます。

twttr.events.bind(
  'favorite',
  function(event) {
    var favoritedTweetId = event.data.tweet_id;
  }
);

click

ユーザーがウェブウィジット内からウェブインテントを呼び出した時にイベントを受信します。



例:ウェブ解析用のイベントを検知する

これらのイベントを取得してあなたのウェブ解析ソリューションへ送るのは簡単です。 これらのイベントをホスティングするページではHTTP やHTTPSプロトコルを使用する必要があるので注意してください。

// Log any kind of Web Intent event to Google Analytics
// Category: "twitter_web_intents"
// Action: Intent Event Type
// Label: Identifier for action taken: tweet_id, screen_name/user_id, click region

// まず、widgets.js ファイルを非同期で読み込みます
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return;
  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"));

// カスタムイベントハンドラを定義します
function clickEventToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = intentEvent.region;
  pageTracker._trackEvent('twitter_web_intents', intentEvent.type, label);
}

function tweetIntentToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = "tweet";
  pageTracker._trackEvent(
    'twitter_web_intents',
    intentEvent.type,
    label
  );
}

function favIntentToAnalytics (intentEvent) {
  tweetIntentToAnalytics(intentEvent);
}

function retweetIntentToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = intentEvent.data.source_tweet_id;
  pageTracker._trackEvent(
    'twitter_web_intents',
    intentEvent.type,
    label
  );
}

function followIntentToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = intentEvent.data.user_id + " (" + intentEvent.data.screen_name + ")";
  pageTracker._trackEvent(
    'twitter_web_intents',
    intentEvent.type,
    label
  );
}

// 非同期リソースが読み込まれるまで待ちます
twttr.ready(function (twttr) {
  // Now bind our custom intent events
  twttr.events.bind('click', clickEventToAnalytics);
  twttr.events.bind('tweet', tweetIntentToAnalytics);
  twttr.events.bind('retweet', retweetIntentToAnalytics);
  twttr.events.bind('favorite', favIntentToAnalytics);
  twttr.events.bind('follow', followIntentToAnalytics);
});


イベントリソースとサンプルの補足


これらの機能を使うことで、Twitter ユーザーのコンテンツをあなたのサイトのJavaScript アプリケーションに動的に取り込んだり、 ユーザーの操作結果をあなたのアプリケーションに反映させたりできるようになります。

質問がある場合やコードとサンプルを共有したい場合は 開発者フォーラムまでお願いします。またメインのウェブサイト用Twitter のドキュメントを参照することもできます。




エンジェル戦記