Installation via Google Tag Manager

Product Fruits can be installed via GTM.

To install Product Fruits via Google Tag Manager (GTM), you have to pass user information to GTM Data Layer.

1. Push user information to GTM Data Layer (dev needed) and set up triggers

You typically installed GTM somewhere in your front-end code. GTM brings a special dataLayer variable, which can be used for passing information to GTM Tags. Product Fruits tag requires a username, so start with pushing it to the data layer. Please note, the dataLayer variable is available after the GTM snippet. Check out GTM documentation.

<!-- Google Tag Manager -->

<script><!-- ... this is where the GTM snippet is ... --></script>
<!-- End Google Tag Manager -->

<script>
	dataLayer.push({ username: theUsernameOfCurrentUser })
</script>

The theUsernameOfCurrentUser variable is an example. You should pass the username of the user who is currently logged in in your application.

GTM tag triggers

If you use the default Page View trigger, you might not receive the right user information from defined GTM variables. To solve this, you can push a custom event to the data layer after all user information is pushed. Then set the custom event trigger. For example, push the data and then the event:

// push the user data
dataLayer.push({ username: theUsernameOfCurrentUser })
// the push the event
dataLayer.push({event: 'user-data-set'})

Then set up the trigger in GTM and assign it to the Product Fruits tag:

2. Define variables in GTM

Go to the GTM administration console and go to Variables. Click on New in the User-defined variables section. The variable name must match the variable name in the dataLayer object. See the video:

3. Create Product Fruits GTM tag

The last step is going to the Tags section. Click on New, give the tag a name (e.g. Product Fruits) and click on Tag Configuration. Find Custom HTML and copy&paste our installation JavaScript. Then you have to pass the variable you created in the previous step and configure the trigger. See the video:

The result code snippet should look like this:

<script type="text/javascript">
window.productFruitsUser = { username: {{username}}, // REQUIRED, must be unique 
                            };
(function(w,d,u,c,l){
        w.productFruits=w.productFruits||{};
        w.productFruits.language=l;w.productFruits.code=c;
        var a=d.getElementsByTagName('head')[0];
        var r=d.createElement('script');r.async=1;
        r.src=u+'?c='+c;
        a.appendChild(r);
})(window,document,'https://app.productfruits.com/static/script.js','YOUR WORKSPACE CODE','en'); // Replace 'en' with a proper language code
</script>

Do not copy this snippet as it doesn't contain your workspace code, always copy the one from the Product Fruits administration.

Publish changes in GTM

Do not forget to deploy changes in GTM and after that, Product Fruits should appear in your application.