React Storefront |

Predictive Prefetching with GA

When using this feature, the next page is predicted and prefetched. This is done by analyzing Google Analytics data and guessing which page is most likely to be navigated to next.

How to setup

Add the client side webpack plugin

GA refers to the Google Analytics View ID

const createPlugin = require('react-storefront-extensions/predict-plugin')

module.exports = prod(path.join(__dirname, '..', '..'), {
  ...
  additionalPlugins: [
    createPlugin({ GA: '...' })
  ]
  ...
})

By default this will trigger a Google authentication prompt during the build phase since it is downloading the data for predictions. In order to prevent this, you can pass a jwt property with the authorization credentials.

jwt: {
   client_email,
   private_key
}

You can also configure the time period to use. By default it uses the past year of analytics data.

period: {
   startDate,
   endDate: new Date(),
}

Add the prediction handler

After launching the client, listen for route changes and predict the next route with the given handler.

...
import prefetchPredictedRoute from 'react-storefront-extensions/predict'

launchClient({...});

router.on('after', prefetchPredictedRoute)

FAQ

Why do I not see any actual prefetching when developing locally? Our service worker ramps up prefetching after a deploy in order to minimize cache misses. During local development each server rebuild looks like a deploy to the service worker, so initially, the service worker will not prefetch anything.