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's 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. The 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's 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 listed above is an example. For Product Fruits to function, it needs the username of the current logged in user - or some other unique identifier - so this is the information that you should pass to the dataLayer.

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 clicking on Tag Configuration. Find Custom HTML and paste our installation JavaScript snippet. Then you have to pass the variable you created in the previous step under 'username' and configure the trigger. See the video:

The resulting code snippet should look like this:

<!-- 1. Insert this part to HEAD -->
<script type="text/javascript">
    (function(w,d,u){
        w.$productFruits=w.$productFruits||[];
        w.productFruits=w.productFruits||{};w.productFruits.scrV='2';
        let a=d.getElementsByTagName('head')[0];let r=d.createElement('script');r.async=1;r.src=u;a.appendChild(r);
    })(window,document,'https://app.productfruits.com/static/script.js');
</script>
<!-- 2. Insert this part anywhere where you have the user information available -->
<script type="text/javascript">
    /*
     * Call this when you have all user information available in your code.

     * DO NOT forget to replace the username placeholder with the username of the logged-in user.

     * Check out our docs for more options.
     */
    $productFruits.push(['init', 'XXXXXX', 'en', { username: '<<REPLACE>>' }]);
</script>

Do not copy this snippet as it doesn't contain your workspace code, always copy the one from the Product Fruits administration. Access it by clicking on the workspace name located at the top right corner of the page and clicking on 'installation'. Also be wary of the language code - 'en' is the default and the default laguage of your workspace but it's possible you intend to use more than one language on your workspace.  

Publish changes in GTM

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