Как встроить диаграмму тенденций Google в HTML?

Я видел сайт, на котором встроена интерактивная диаграмма тенденций Google: http://knowyourmeme.com/memes/danbo

Когда я осмотрел элемент, диаграмма была встроена с кодом:

<script type="text/javascript" src="http://www.google.com/trends/embed.js?hl=en-US&amp;q=danbo%20robot,danbo%20amazon,danbo%20yotsuba&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=600&amp;h=350"></script>

Я проверил верхнюю часть html на предмет наличия скрипта, связанного с Google, и обнаружил следующее:

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-15176568-9'); ga('send', 'pageview'); </script>

<script type="text/javascript"> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; gads.src = 'http://www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })(); googletag.cmd.push(function() { googletag.pubads().setTargeting('site', 'kym'); googletag.pubads().setTargeting('page', '_memes_danbo'); }); </script>

Но когда я создал файл html как таковой:

<html>

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-15176568-9'); ga('send', 'pageview'); </script>

<script type="text/javascript"> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; gads.src = 'http://www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })(); googletag.cmd.push(function() { googletag.pubads().setTargeting('site', 'kym'); googletag.pubads().setTargeting('page', '_memes_danbo'); }); </script>

<script type="text/javascript" src="http://www.google.com/trends/embed.js?hl=en-US&amp;q=danbo%20robot,danbo%20amazon,danbo%20yotsuba&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=600&amp;h=350"></script>

</html>

У меня не было диаграммы тенденций Google, но я не получил ее, и у меня было следующее:

введите описание изображения здесь

Когда вы переходите на сайт трендов Google, например http://www.google.com/trends/explore?hl=en-US#q=danbo+robot,danbo+amazon,danbo+yotsuba, есть встроенные скрипты, которые можно скопировать и вставить в HTML, но когда я поместил это в мой собственный html, это тоже не сработало.

Как встроить интерактивную диаграмму тенденций Google, например, в конец этой веб-страницы http://knowyourmeme.com/memes/danbo?


javascript html google-trends
person alvas    schedule 19.11.2014    source источник
comment
На самом деле работает. Вы поместили свой код прямо в тег <html>? Лучше подчиняться структуре html > head + body.   -  person Tommi    schedule 20.11.2014
comment
Когда я запустил открытие html-файла локально с подключением к Интернету, я получил The file or directory could not be found. вместо диаграммы.   -  person alvas    schedule 20.11.2014
comment
Проблема заключается в коде, который скрипт загружает с сервера Google: document.write('<iframe width="600" height="350" src="//www.google.com/trends/fetchComponent?hl\75en-US\46q\75danbo%20robot,danbo%20amazon,danbo%20yotsuba\46content\0751\46cid\75TIMESERIES_GRAPH_0\46export\0755\46w\075600\46h\075350" style="border: none;"></iframe>'); Эта часть: src="// указывает браузеру открывать iframe по тому же протоколу, что и на главной странице. В вашем случае это протокол file:, и, очевидно, у вас нет такого пути на вашем жестком диске. Вы должны использовать локальный сервер для обслуживания своей страницы через http:   -  person Tommi    schedule 20.11.2014

Ответы (1)


arrow_upward
2
arrow_downward

Включите результат тренда Google в iframe, и все готово.

<iframe scrolling="no" style="border:none;" width="640" height="330" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=danbo+robot,danbo+amazon,danbo+yotsuba &cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=640&h=330"></iframe>

См. демонстрацию

person Vikash    schedule 28.01.2015