Googleトレンドを外部サイトに埋め込み、かつ任意のキーワードに変更する

「Googleトレンドをサイトに表示したい」というご要望が有り、通常であれば埋め込みコードが提供されているので、それを貼り付けるだけなのですが、今回は任意のキーワードに変更する必要が有り、考えてみました。

通常の埋め込み

https://trends.google.co.jp/trends/explore?q=Youtube&geo=JP

埋め込みコードが提供されていますので、それをサイトに貼り付けるだけです。

任意のキーワードに変更する

サンプル

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="//ssl.gstatic.com/trends_nrtr/2884_RC01/embed_loader.js"></script>
<script>
	$(document).on("click","button", function(){
		let keywd = $("#keywd").val();
		let trendWrap = document.getElementById("trendWrap");
		$("#trendWrap").html("");
		if(keywd){
			trends.embed.renderExploreWidgetTo(trendWrap,"TIMESERIES", {"comparisonItem":[{"keyword":keywd,"geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
		}
	});
</script>
<div id="trendWrap"></div>

trends.embed.renderExploreWidgetTo(trendWrap,”TIMESERIES”…..

青字の部分が埋め込む箇所です。

ココではキーワードのみの変更に留めていますが、期間やカテゴリの指定等も出来ます。WordPressで任意のカテゴリをGoogleトレンドに渡し、グラフをブログ内に表示するといったことも出来ると思います。