US English (US)
ES Spanish

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form below and we will reply as soon as possible.

  • Appcues Certifications & Training
  • Integration Hub
  • Contact Us
English (US)
US English (US)
ES Spanish
  • Docs home
  • Installation & Developers
  • Installing Appcues on Web

Installing with Google Tag Manager (Developer)

Learn how to use Google Tag Manager to install Appcues quickly and without any new code.

Updated at August 16th, 2024

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Home

  • Installation & Developers

    • Web Experiences

      • Mobile Experiences

        • Workflows

          • Analytics & Data

            • Account Management

              • Best Practices

                • Integrations

                  Table of Contents

                  Loading Appcues resources into the page Identifying your Users Tracking Page Changes Add a tag for Appcues.group() Installing Appcues Asynchronously

                  Using Google Tag Manager to install Appcues can be a quick and easy way to get started with Appcues without having to push any new code. Getting started is pretty easy. There are two to three things we need to get done:  

                  1. Load the Appcues Javascript SDK into the page.
                  2. Make sure Appcues.identify() is called.
                  3. For single page applications, make sure page changes are being tracked appropriately via Appcues.page() or automatic detection
                  4. Optionally, add a tag for Appcues.group().

                  Loading Appcues resources into the page

                  These first two items are pretty easy. The Appcues script should be loaded and Appcues.identify() should be called on every page load. We'll want to put the following line into a tag (substituting your own account id for <YOUR_ACCOUNT_ID>):

                  <script src="//fast.appcues.com/YOUR_ACCOUNT_ID.js"></script>

                  Identifying your Users

                  Appcues depends on the Appcues.identify() call to pass a user ID and other user properties when checking whether to show content on a page or not. You can add this call into another tag. If you're merely testing Appcues, you can always hard-code these values in, such as adding the following to Tag Manager:

                  <script>   
                      Appcues.identify('testUserId', {userName: 'Test Testerson', email: 'test@test.com'});
                  </script>

                  This means that every user will have the same user ID and there won't be a way to differentiate between users, so, for a full implementation, you'll need to send over an actual user ID. Although a user ID is the only user information actually required for Appcues to work, it's also a good idea to send some additional user properties. To do this through Tag Manager, you'll need to leverage Tag Manager Variables (see here) and pass those into the identify call:

                  <script>   
                      Appcues.identify(<USER_ID_VARIABLE>, {<USER_PROPERTY_VARIABLES>});
                  </script>

                  Tracking Page Changes

                  For Single Page Applications, you will need to automatically detect page changes or make an Appcues.page() call for any URL changes.

                  This means that when the URL changes without causing a full page load, Appcues will still know that the user is on a new page and should check for new content to show.

                  Example of using Appcues.page():

                  Example of using automatic detection:

                  <script type="text/javascript">
                    window.AppcuesSettings = {
                      enableURLDetection: true
                    };
                  </script>
                  <script src="//fast.appcues.com/YOUR_ACCOUNT_ID.js"></script>

                  Add a tag for Appcues.group()

                  Group properties describe the account on which the user is currently active; things like company name, account manager, plan tier, mrr, feature gates, industry, and many more. This information can be sent using Appcues.group(). A user can belong to multiple groups, but only one group can be identified at a time. Only the group most recently associated with the user will be considered for targeting.

                  Similar to  Appcues.identify(), a unique group ID is required, and all the same formatting restrictions apply.

                  Example:

                  <script>
                      Appcues.group("6789", {company_name: "Lendi Global",plan: "enterprise",employee_count: 12000,trial: false});
                  </script>

                  And that should do it! To test your installation after publishing, login to your site, open the browser console, and enter 

                  Appcues.debug()

                  This will give you some diagnostic feedback on how Appcues is set up and what data is being sent. Check out our debugging documentation for full details on this feature. And for more information on a standard installation of Appcues, check out our installation overview.

                  Installing Appcues Asynchronously

                  One way to install Appcues asynchronously via GTM is with two separate tags. The first one should be set to trigger using one of GTM’s standard triggers such as Page View or Window Loaded. The second one should be set to fire with the custom event added to the GTM data layer in Tag 1.

                  Tag 1:

                  <script>
                  function loadScript( url, callback ) {
                    var script = document.createElement( "script" )
                    script.type = "text/javascript";
                    if(script.readyState) {
                      script.onreadystatechange = function() {
                        if ( script.readyState === "loaded" || script.readyState === "complete" ) {
                          script.onreadystatechange = null;
                          callback();
                        }
                      };
                    } else {  //Others
                      script.onload = function() {
                        callback();
                      };
                    }
                  
                    script.src = url;
                    document.getElementsByTagName( "head" )[0].appendChild( script );
                  }
                  
                  loadScript('//fast.appcues.com/YOUR_ACCOUNT_ID.js', function() {
                    dataLayer.push({'event': 'AppcuesLoaded'});
                  });
                  </script>

                  Tag 2:

                  <script type='text/javascript'>
                    Appcues.identify('some_test_user'); 
                  </script>

                  Note: although GTM tags will fire in sequence, the code within them runs asynchronously from each other. This means that you will want to ensure that the SDK script snippet tag is fully loaded before making any Appcues API calls like Appcues.identify(). This can generally be done by setting the SDK script tag to fire on Page View and the identify tag to trigger on something like Window Loaded. If you would like to use the same GTM trigger for both tags, we recommend installing Appcues asynchronously

                   

                   

                  installer google tag gtm google installation async install

                  Was this article helpful?

                  Yes
                  No
                  Give feedback about this article

                  Related Articles

                  • Javascript API (Developer)
                  • Appcues Installation Overview
                  • User Properties Overview
                  • Welcome and Getting Started
                  Appcues logo

                  Product

                  Why Appcues How it works Integrations Security Pricing What's new

                  Use cases

                  Appcues Integration Hub User Onboarding Software Feature Adoption Software NPS & Surveys Announcements Insights Mobile Adoption

                  Company

                  About
                  Careers

                  Support

                  Developer Docs Contact

                  Resources

                  The Appcues Blog Product Adoption Academy GoodUX Case studies Webinar Series Made with Appcues Appcues University

                  Follow us

                  Facebook icon Twitter icon grey Linkedin icon Instagram icon
                  © 2022 Appcues. All rights reserved.
                  Security Terms of Service Privacy Policy

                  Knowledge Base Software powered by Helpjuice

                  Expand