Google Trends embed is destroying my webpage

Question

I am doing my damnedest to embed a Google trends chart into a section of my site.

In theory, it seems easy:

1.) copy script from Google:

2.) Clear a space in your webpage:

3.) Add the code:

<div class="full-row4" style="height: 300px;">
  <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> 
  <script type="text/javascript"> 
    trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/078rys","geo":"","time":"today 12-m"}],"category":0,"property":""},
     {"exploreQuery":"q=%2Fm%2F078rys&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}
    ); 
  </script> 
</div>

Seems easy right? wrong!

Every time I do this, I get this result:

Upon further inspection, I found that when those scripts were loaded in, it wipes my entire body of the webpage. (Note: the chart gets loaded in thru an AJAX call containing the entire active page minus the navbars)

I've tried an array of different logic to try and get this to work, but everything I try deletes all HTML in the body tag of the webpage. (script tags are still there)

I found people with a similar issue, but it seems Google has changed how you embed these widgets into a site. Rendering any previous stackoverflow documentation useless. (at least from what I found)

score 3 · Answer 1 · answered Dec 26 '19 at 16:04

3

you can use renderExploreWidgetTo() function instead, it takes DOM element as first parameter:

var divElem = document.getElementById('wrapper');

trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});

answered Dec 26 '19 at 16:04

Nuryagdy Mustapayev

667
1
7
27

Excellent! Make sure your script is outside of the divElem as well. – Ben Dec 20 '22 at 16:34

score 0 · Answer 2 · answered Apr 21 '18 at 16:27

0

Google trends embed script create an iframe at the hosting website. Here is a simple example.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  </head>
  <body>
    <h1>hello</h1>
    <div>
      <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dogs","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dogs&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>     
    </div>
    <h1>world</h1>
  </body>
</html>

As you can see, the body is not affected. The problem is probably not with the trends scripts, but a more general issue.

Try creating an iframe at your page, does it display correctly?

answered Apr 21 '18 at 16:27

Guy Yogev

861
5
14

Iframes work great! I just tried embedding a youtube video without any issue – Michael Dennis Apr 21 '18 at 22:31
Less exclamation mark, more details would be helpful. Any errors? Use a simple iframe, not YouTube – Guy Yogev Apr 23 '18 at 03:46
How does the JS is loaded on your page? Try loading the the embed_loader.js before/after your own js code, does it change the behavior? – Guy Yogev Apr 23 '18 at 05:21
I have all the JS loaded in when the app loads, then all the webpages are loaded in thru JSON files and AJAX. I tried loading in the embed loader with all the other JS but it produced the same result. I think im just to the point where I'll accept that Trends embed simply wont work on my site :/ – Michael Dennis Apr 25 '18 at 08:35
Also, no errors-- A few warnings from unrelated JQuery events but nothing that has affected anything in the past. You can see what i'm talking about here: https://dev.cryptotrack.live/ | Username: test | Password: pass – Michael Dennis Apr 25 '18 at 08:39
mmm... really hard one... It feels to me that there is a collision between Trends embed-loader.js and some other JS. what happens when you place this script tag above all the other scripts? Also, I see you use charts.js. trends use gviz, so maybe something at that direction. – Guy Yogev Apr 25 '18 at 19:21
digging around at trends embed code, looks like it performs a `document.write` action, which overrides the page if its already loaded. try making sure this piece of code runs before the page parse is done. https://stackoverflow.com/a/23787551/6767060 – Guy Yogev Apr 25 '18 at 20:10
Moved the google embed script above everything else (in the head) also removed charts.js from the app. Still receiving the same result. my guess is that it's related to how I load new pages into the application. Not sure if it will be possible. I tried doing this near the beginning of development (before I had a bunch of JS) and it still does this. My guess is that it has something to do with how I load new pages into the site. – Michael Dennis Apr 26 '18 at 16:47

Google Trends embed is destroying my webpage

2 Answers2