How to display a dynamic Google Trends graph in Elementor?

Display dynamic Google Trends graphs in Elementor

You have created a section on your website consisting of dynamic pages populated with data from Advanced Custom Fields. Nice move!

For your project, you want to display a dynamic Google Trend graph on each page. Great idea!

So you’re opening Google Trends website, grab the embed code and try to figure out which part to customize to insert your keywords.

Here’s what the code looks like for ChatGPT, the AI talk of the day (grabbed from this page):

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

I’ve highlighted in bold the 2 occurrences of the keyword (chatgpt). This is the keyword you should replace with the topic of your specific post.

The easiest way to do it is to prepare your posts in a Google Sheet. You basically divide the Google Trends code in 3 sections, in 3 columns, + your keyword in the first column, then concatenate the elements with a simple formula in the 5th column.

Let’s do it.

Content of column A = keyword (e.g. chatgpt)

Content of column B = section 1. of the embed code, until “keyword:”

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/3180_RC01/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"

Content of column C = section 2. of the embed code, until q= Do not forget the opening

","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=

Content of column D = section 3. of the embed code, until the closing tag

&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>

Content of column E (the 5th one) = your formula to concatenate all columns

=CONCATENATE(B2,A2,C2,A2,D2)

See how I repeat A2 (i.e. the keyword reference) since we need it twice in the final code snippet.

If we change the keyword into Stable Diffusion, it gives us as end-result

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

Which, embedded via the HTML module of Gutenberg, gives us this graph.

How to embed the Google Trends graph in your custom posts

Theoretically, you could simply import (via WP All Import or another method) the customized embed code for each post as a text field in ACF (Advanced Custom Fields) and render it via the Elementor HTML module.

But, at time of writing (Dec 2022), it doesn’t work, as confirmed by the Elementor Support Team.

The HTML module, when used with dynamic data, removes the script tags, which breaks the HTML code.

Elementor HTML module

Fortunately there’s a smart hack to display your dynamic data, using a shortcode.

Simply install and activate the Shortcoder plugin: https://wordpress.org/plugins/shortcoder/

And create a shortcode which uses the name of your custom field.

Using a shortcode to embed dynamic Google Trends graphs

For instance gtrend, if you named your custom field that way in ACF. Click on insert custom field and publish the shortcode, then copy the shortcode and insert it in your Elementor page via the shortcode module, not the HTML module. Voilà!

insert a shortcode for HTML in Elementor

The shortcode will pull the dynamic data from ACF and display your Google Trends graph on each custom post.

Why can’t I see the embedded Google Trends graph in Safari or Chrome Incognito?

The graph won’t be displayed in Safari or in Chrome Incognito since those configurations block by default cross-origin requests. In Safari, you have to activate cross-site tracking to see the embedded graphs. Simply untick the “prevent cross-site tracking” option via the Privacy preferences.

disable cross-site tracking prevent to display trends

🚀 Subscribe to my weekly newsletter packed with tips & tricks around AI, SEO, coding and smart automations

☕️ If you found this piece helpful, you can buy me coffee