Installation via Google Tag Manager

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');
    
    /*
     * note the following about the below push snippet: 
     * the XXXXX must be replaced with your workspace code, find it in the 'installation' tab of your Product Fruits workspace
     * 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.
     * Username should be set to the identity of the currently logged in user(not your Product Fruits username). More information about this user (such as sign up date) can be sent. Check our documentation for more information.
     */
    $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 but be sure to change the two instances of 'let' to 'var', as seen above. 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.