No images? No problem. Use Cloud Functions and the Google Search API to display them in your dashboards

[kabalan_gaspard]

This technique can be particularly useful for retailers (brick & mortar or eCommerce) who don't have product images in their database, but would like to display them on their dashboards so end users can quickly visualise a given item. Here we're using Google Cloud Functions, but you can easily substitute with any serverless (or self-hosted) function.

• Go to https://cse.google.com (create a free Google account if you don't have one already)

• Click "New Search Engine", and fill in the details as in the screenshot below, then click Create. The important part is to fill in "*.[your company name].com" in Sites to search

• Go to the control panel

• Switch image search on, and note the "cx=" parameter in the public URL

• Go to https://console.cloud.google.com/. You will need to create a Google Cloud account and project if you do not already have one, and enable billing (to this date (October 2020), GCP gives you a 90-day free trial with no auto-renewal and more than enough credit than you'll need).

• In your project, on the left hand side, select "APIs and Services" → Enable APIs → Custom Search API, and enable it, then create an API key as per the screenshots below. We highly recommend restricting the key.

• Next, from the console, go to Cloud Functions (enable if the API if this is not done already), and create a function as per the screenshot below

• Fill in the following parameters and code (copied below). Be sure to fill out both index.js and package.json. You can edit the region in advanced options.

  1. Make sure you substitute with your API key and search engine ID copied above

/**
* Responds to any HTTP request.
*
* @param {!express:Request} req HTTP request context.
* @param {!express:Response} res HTTP response context.
*/

const request = require('request');

exports.searchImage = (req, res) => {
  let query = '';
  if(req.query.q){query=req.query.q;}

  let requestQuery = 'https://www.googleapis.com/customsearch/v1?key=[YOUR API KEY]&num=1&cx=[CSE param]&q='+encodeURI(query);
  request.get(requestQuery, function (error, response, body) {
    if(error){res.status(error.status).send(error.message);}
    else{
      let parsedResponse = '';
      if(JSON.parse(response.body).items[0].pagemap.product){parsedResponse=JSON.parse(response.body).items[0].pagemap.product[0].image;}
      else if (JSON.parse(response.body).items[0].pagemap.cse_thumbnail[0].src){parsedResponse=JSON.parse(response.body).items[0].pagemap.cse_thumbnail[0].src;}
      else if (JSON.parse(response.body).items[0].pagemap.cse_image[0].src){parsedResponse=JSON.parse(response.body).items[0].pagemap.cse_image[0].src;}
      else{res.status(404).send('Image not found.');}
      res.redirect(parsedResponse);
      /*request(parsedResponse,function(err2,res2,body2){
      res.send(res2.body);
      });*/
    }  
  });
};

/* package.json: */
{
  "name": "sample-http",
  "version": "0.0.1",
  "dependencies": {
    "request": "^2.81.0"
  }
}

1. Click "create" (will take a couple of minutes)

2. When ready, click the function, then "Trigger"

• Test the URL by copying it, and adding "?q=[item you want the image for]", e.g. "?q=tshirt" at the end

• Finally, create a new dimension in your LookML: 

  dimension: product_image {
     type: string
     sql: ${product_name} ;;
     html: <img src="https://your-trigger-url?q={{rendered_value | encode_uri}}" height="100" > ;;
  }