How to install the ProfitWell.js Snippet with Google Tag Manager

Overview

There are two options for installing the ProfitWell Snippet with Google Tag Manager, depending on what kind of site you want to install the snippet on:

  • Marketing sites: users can't sign into these sites, e.g. landing pages, marketing sites, promotional pages.
  • Web-Apps: users can sign into them, although they may also be able to visit these sites anonymously, without an account.

Marketing Site

  1. Open the corresponding GTM container, click on New Tag and write a meaningful name, like ProfitWell Snippet
  2. On Tag Configuration, click on Custom HTML
  3. Paste the following, replacing PUBLIC_API_TOKEN_HERE with your public API token
    <script id="profitwell-js" data-pw-auth="PUBLIC_API_TOKEN_HERE">
    (function(i,s,o,g,r,a,m){i[o]=i[o]||function(){(i[o].q=i[o].q||[]).push(arguments)};
    a=s.createElement(g);m=s.getElementsByTagName(g)[0];a.async=1;a.src=r+'?auth='+
    s.getElementById(o+'-js').getAttribute('data-pw-auth');m.parentNode.insertBefore(a,m);
    })(window,document,'profitwell','script','https://public.profitwell.com/js/profitwell.js');

    profitwell('start', {});
    </script>
  4. Check Support document.write below the HTML snippet
  5. On Triggering, select All Pages
  6. Save the tag and Submit the changes

Web-App

It is recommended to first load the snippet and then, once your app knows exactly whether there is a logged-in customer or not, start it.

Load the snippet

  1. Click on New Tag and write a meaningful name, like ProfitWell Snippet Load
  2. On Tag Configuration, click on Custom HTML
  3. Paste the following, replacing PUBLIC_API_TOKEN_HERE with your public API token
    <script id="profitwell-js" data-pw-auth="PUBLIC_API_TOKEN_HERE">
    (function(i,s,o,g,r,a,m){i[o]=i[o]||function(){(i[o].q=i[o].q||[]).push(arguments)};
    a=s.createElement(g);m=s.getElementsByTagName(g)[0];a.async=1;a.src=r+'?auth='+
    s.getElementById(o+'-js').getAttribute('data-pw-auth');m.parentNode.insertBefore(a,m);
    })(window,document,'profitwell','script','https://public.profitwell.com/js/profitwell.js');
    </script>
  4. Check Support document.write below the HTML snippet
  5. On Triggering, select All Pages
  6. Save the tag

Start it

From within your page, you have to tell Google Tag Manager's Data Layer whether there is a logged-in customer or not, once you know that for sure. For example, if there is a logged-in customer

dataLayer.push({ 'event': 'start_pw', 'pw_user_email': user_email })

Or, if you are sure that the customer is anonymous

dataLayer.push({ 'event': 'start_pw' })
For more information on the Data Layer, visit the GTM Developer Guide.

Then, on the corresponding Google Tag Manager container, ensure that the pw_user_email variable is defined

  1. Go to Variables and under User-Defined Variables, click on New and write pw_user_email as the name
  2. On Variable Configuration, select Data Layer Variable
  3. Write pw_user_email as the Data Layer Variable Name and click on Save

After that, add the PW Start tag and publish

  1. Click on New Tag and write a meaningful name, like ProfitWell Snippet Start
  2. On Tag Configuration, click on Custom HTML
  3. Paste the following
    <script>
    profitwell('start', {
    'user_email': {{pw_user_email}}
    });
    </script>
    Do not worry about anonymous customers, the above snippet will work for them, and also for those that are logged-in.
  4. On Triggering, click on + (New Trigger) and write a meaningful name, like Start PW
  5. On Trigger Configuration, click on Custom Event
  6. In Event name, write start_pw (or whatever event name you pushed to the Data Layer.)
  7. Save the trigger, Save the tag and Submit all the changes


How did we do?