Google Tag Manager

How to install fera product reviews with Google Tag manager.

Jameela G avatar
Written by Jameela G
Updated over a week ago

This guide is for stores that want to install Fera reviews, photos, videos, testimonials, events, and any other functionality we have through Google Tag Manager.

1. Copy your Public key and footer script

Go to the setup section from here to copy your public key.

Replace the code below /* TODO - PUBLIC_API_KEY */ with the public key you just copied from your account.

<!-- // BEGIN // Footer Code - DO NOT MODIFY // -->
<script type="application/javascript">
window.fera = window.fera || [];
window.fera.push("configure", { store_pk: "/* TODO - PUBLIC_API_KEY */"} );
window.fera.push("setProduct", { id: 321, name: "Product 312", price: 123.45, url: "", thumbnail_url: "" });
// window.fera.push("setShopper", { customer_id: "customer-123", name: "John Doe", email: "[email protected]", }); */
// window.fera.push("setCart", { total: 100.0, currency: 'USD', items: [{price: 50.0, total: 100.0, product_id: "product-123", name: "Product 123", quantity: 2 }] }); */
var FeraCachedAsset=function(r){var n=this;this.version="0.2.3";var||r.url.split("?")[0].split("#")[0];var o="Fera.AssetCache."+a;var s=(new Date).getTime()/1e3;var c=r.type||(r.url.indexOf(".html")!==-1?"text/template":r.url.indexOf(".css")!==-1?"text/css":"text/javascript");n.load=function(t){t=t||function(){};if(n.content){return t(n.content)}if(!e()){u(r.url,function(e){n.content=e;i(e);;t(e)})}else{t(n.content)}return true};{var t=s+(r.expiresIn||900);if(!l()||!e){return false}var n={name:a,url:r.url,expires:t,content:e};window.localStorage.setItem(o,JSON.stringify(n));return true};n.clear=function(){window.localStorage.removeItem(o);return false};var e=function(){if(!l())return false;var e=window.localStorage.getItem(o);if(!e||typeof e!=="string"){return null}var t=JSON.parse(e);if(t.expires<s||t.url!==r.url){return n.clear()}n.content=t.content;i(n.content);return true};var i=function(e){if(document.getElementById(o))return;var t=document.createElement(c==="text/css"?"style":"script");t.type=c;;t.async=!0;t.innerHTML=e;document.body.appendChild(t)};var u=function(e,t){var n=new XMLHttpRequest;n.async=true;n.onreadystatechange=function(){if(n.readyState==4&&n.status<300){t(n.responseText)}};"GET",e,true);n.send()};var l=function(){var e="test";try{window.localStorage.setItem(e,"t");window.localStorage.removeItem(e);return 1}catch(e){return 0}}}; new FeraCachedAsset({ name: 'bananastand', expiresIn: 900, url: window.__bsioJsUrl || ""}).load();
<!-- // END // Footer Code // -->

Set product details

Replace line 6 above with your store's current product details (the current product being viewed on the current page, if any). This step varies depending on your setup.

(optional) Set cart and shopper details

If you knowledgeable in Google Tag Manager enough, you should also update the setShopper and setCart details using your GTM data

2. Add script tag to Google Tag Manager

Add the footer script to google tag manager like this:

3. (optional) Trigger purchase events

If you want Fera to attribute purchases to your widgets, use A/B testing, or see complete shopper journeys you will need to push the order event.

This step varies depending on your setup, so please follow the custom API integration instructions and create a custom tag in GTM

Testing out the GTM connection

If everything is working properly you should be able to use the widget previewer properly. You can also test the connection from the Setup section of your account here.

Did this answer your question?