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 information objection - the below example pushes just a username
dataLayer.push({ username: theUsernameOfCurrentUser })
// telling GTM that the user data is set and that the PF tag should be triggered
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';
	
	var a = d.getElementsByTagName('head')[0];
	var r = d.createElement('script');
	r.async = 1;
	r.src = u;
	a.appendChild(r);
})(window, document, 'https://app.productfruits.com/static/script.js');

/*
 * Please note the following about the below push snippet:
 * 1. The XXXXX must be replaced with your workspace code, 
 *    find it in the 'installation' tab of your Product Fruits workspace.
 *
 * 2. The language code here is set to 'en' for English, but if your 
 *    onboarding content is in another language, this should be adjusted.
 *    If onboarding content is blank after installation, then check 
 *    your workspace settings to see which language your content was written in.
 *
 * 3. 'username' should be set to the identity of the
 *	current user (not your Product Fruits username). 
 *	More information about a user can be sent. Check our documentation 
 *	for more information.
 */

$productFruits.push(['init', 'XXXXXX', 'en', { username: '<<REPLACE>>' }]);
</script>

If you copy the code from above, please replace the XXXXXX with your workspace code. Find it by clicking on the settings gear located on the left side of the my.productfruits.com interface and then clicking on 'installation'. You may also need to update the 'en' language code.

If you copy the code from the 'other platforms' tab, you'll need to replace the two instances of 'let' with 'var', as seen above.

Publish changes in GTM