5

Google Trends allows to embed widgets of search trends data on any HTML page. The widget "Related queries" presents data of Top and Rising search queries. By default when the embedded widget loads it shows the Top queries.

I would like to show by default the Rising queries view instead of Top queries view. It can be switched manually from the widget menu. I am looking for a way to automate the process by showing only rising queries view in 1 or more widgets on a HTML page.

Example Related queries widget for "Stack Overflow" keyword: https://jsfiddle.net/Lox8heyt/

Image: https://i.stack.imgur.com/Wnqxa.png

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2213_RC01/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("RELATED_QUERIES", {"comparisonItem":[{"keyword":"Stack Overflow","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=Stack%20Overflow&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>

Google Trends API: I did not find the option to change the view in the widget code.

Is it possible to click automatically on the widget button via JS to change the view from Top to Rising? For example using the XPath or JS path?

Ng-Click:

ng-click="ctrl.setViewField('risingBullets')
ng-click="ctrl.setViewField('bullets')"

XPath:

//*[@id="menu_container_0"]/md-menu-content/md-menu-item[1]/button

JS Path:

document.querySelector("#menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button")

Selector:

#menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button
R. Richards
  • 24,603
  • 10
  • 64
  • 64
Martinx
  • 51
  • 2

1 Answers1

0

This isn't an answer per se but I hope it helps a little

looking at the google trends widget its clearly written in angular,

ordinarily, you could call an angular method from jquery like so:

angular.element($(".md-menu-item-text")).triggerHandler('click');
//angular.element('#someElemnt').scope().AngularFunction();

there are lots of examples on SO of how to do this:

Call Angular Function with Jquery

How to call angular scope function from javascript?

To name but a few....HOWEVER, from my tests this only seems to work after you click on the google trends widget, I think that's because the widget creates an iframe that seems to require user interaction before the parent page can see angular and because it is a dynamically rendered iframe you can't seam to force its activation or hook into it in any meaningful way. You could try using the npm version that has the call-back function

googleTrends.interestOverTime({keyword: ['Women\'s march', 'Trump Inauguration']})
.then(function(results){
  console.log('These results are awesome', results);
  //call some function here 
})
.catch(function(err){
  console.error('Oh no there was an error', err);
});

In the "then" method, you should have access to angular to find the element to call its event because at this point you know angular is loaded and accessible, but that's just a theory I haven't tested,

I notticed when using the jquery document on load function, angular was undefined (again because it's in an iframe it seems) but as soon as you interact with the widget in any way, then it seems you are able to access the elements within and can call angular and can call the click event of the button in question using the example code above

You could look at actually using angular to implement the google trends, that seems to be what google use in their example page: https://trends.google.com/trends/explore

which it seems has set the rising as the default option on some of their examples, meaning it must be possible

I hope this helps

Patrick Hume
  • 2,064
  • 1
  • 3
  • 11
  • hi patrick, thanks for the observations, but I am quite at a point where you write "you haven't tested". I didn't know angular but I was able to call a click function on element, and I realised that it needs interaction before, I have tried a few page load elements, .then functions but couldn't figure it out how to call a click function on element. This is why I am here :( – HOY Aug 06 '22 at 07:01
  • Sorry I didn't get back to you, I was in the process of making an angular example using the google trends to see if I could work out from that another solution, I think the issue is the need to interact with the iframe before it becomes available to the parent dom , could not find a way around that, even tried copying the contents of the iframe out but then the widget doesn't behave correctly....I raised the issue with google, didn't hear back, i looked a jquery library for loading in iframes but none could force the iframe to be auto active, it seams to be a limitation of .... – Patrick Hume Aug 13 '22 at 08:08
  • ...using iframes that are dynamically loaded, did you have any more joy ? Its annoying because you can access the iframe and call the button click but only after you click on it to make it active and you cant seam to force that active state with javascript even though in theory you should be able to replicate the clicking of the iframe ..very frustrating – Patrick Hume Aug 13 '22 at 08:09
  • I did pretty same things and failed. Since I am not a javascript expert, I just try workarounds to solve it, but couldn't find a way to interact with the iframe just by code. I realised that in google developer tools inspect section there is a tab called "Javascript context", and when you interact with the iframe, this "javascript context" changes from "top" to "RELATED_QUERIES". So I looked for a way to change it by code but no solution. The location to javascript context is -> developer tools -> console -> next to "clear console" button. – HOY Aug 13 '22 at 08:27
  • yes the problem with that is you hit a CORS issue ```VM4287:1 Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame. at :1:57.``` so whilst you can access the iframe though javascript context you cant go beyond that because of CORS...im looking at how google dev tools get around it so see if one can do the same JS side but dosent seam to be supported in chrome like it is in IE or Firefox see: https://stackoverflow.com/questions/7961229/is-there-a-way-to-change-context-to-iframe-in-javascript-console – Patrick Hume Aug 13 '22 at 20:53