8 Replies Latest reply on Mar 16, 2018 1:48 PM by ssauder

    Inserting Google Analytics into PI Vision

    taterhead247

      Does anyone have experience inserting Google Analytics into PI Vision code?  We have a fairly well established Google Analytics account in our company, but we can't figure out where to insert the necessary code in the Vision directory in order to make it work.  We approached OSI for help, but they are very reluctant to help us "jailbreak" Vision.  We have a development environment so we'd be able to play around with it a bit.  Any clues would help.

       

      Lonnie Bowling , I was told you were an expert in this field?  And might be able to help?

        • Re: Inserting Google Analytics into PI Vision
          LalBabuShaik

          Hi Damon

           

          PI Vision extensibility feature will be useful to implement the same.  Please refer @Marcos Vainer Loeff blog for additional information Developing the Google Maps custom symbol for PI Vision 3 - Part 1

          1 of 1 people found this helpful
          • Re: Inserting Google Analytics into PI Vision
            KenjiHashimoto

            If you want to show the other web page on the PI Vision, then frame can be used.

            There are example custom symbols from OSIsoft on the GitHub.

            GitHub - osisoft/PI-Vision-Custom-Symbols: Learn how to add a custom symbol, created with JavaScript and HTML, to PI Vis…

            There is a embed webpage custom symbol and I hope it can show Google Analytics page.

            PI-Vision-Custom-Symbols/Community Samples/OSIsoft/embedWebPage at master · osisoft/PI-Vision-Custom-Symbols · GitHub

            If you search some item and put this symbol, then you can see webpage on PI Vision as a frame.

            Right click and format can set the web page address.

            The remaining things are

            1 Some of the web site does not allow flame. I have not checked it by myself.

            2 Google analytics page require authentication.

             

            Please try above embed webpage custom symbol and let us know the results.

            • Re: Inserting Google Analytics into PI Vision
              Marcos Vainer Loeff

              Hi Damon,

               

              Yes, it should be possible. You need to create a file on the PI Vision ext folder (the folder for PI Vision custom symbols). Although you won't be creating a custom symbol in this case, you need to put the file in this folder so PI Vision can load it. All files from this folder is loaded by default. The next step is to load Google Analytics script dynamically. Here is an example of JavaScript code:

               

              var xhrObj = new XMLHttpRequest();
              xhrObj.open('GET', "/PIVision/Scripts/app/editor/symbols/ext/libraries/angular-piwebapi-kerberos.min.js", false);
              xhrObj.send('');
              var se = document.createElement('script');
              se.type = "text/javascript";
              se.text = xhrObj.responseText;
              document.getElementsByTagName('head')[0].appendChild(se);
              

               

              You might need to change something besides the URL of the script file. I haven't tested it with Google Analytics.

               

              Hope this helps!

              1 of 1 people found this helpful
              • Re: Inserting Google Analytics into PI Vision
                ssauder

                Hi Damon,

                This article from Microsoft looks promising. Have you seen it yet?

                 

                Sample: Web Analytics Tracking Module | Microsoft Docs

                 

                I will hopefully have a chance to try it out tomorrow. If it is compatible, this solution would have the extra benefit of not requiring any PI Vision code to be touched.

                1 of 1 people found this helpful
                  • Re: Inserting Google Analytics into PI Vision
                    ssauder

                    I have an update. After following the steps in the article, I was able to successfully track PI Vision with Google Analytics. The only problem I had was I believe there is a typo in this line:

                     

                    <section name="webAnalytics" overrideModeDefault="Allow">

                     

                    I had to modify it to be:

                     

                    <section name="webAnalytics" overrideModeDefault="Allow" />

                    1 of 1 people found this helpful
                  • Re: Inserting Google Analytics into PI Vision
                    taterhead247

                    Seth Sauder, thanks for following up.  A few things:

                    • For the life of me, I can't figure out how to get gacutil, which is a requirement of the IIS approach
                    • Unless I'm reading the instructions wrong (which is more than likely) you have to add some code to the Vision web.config file.  I feel like that would be unsupported by OSI?
                    • Bryan Klosiewicz forwarded me some snapshots you sent him.  Similar to you we are having trouble getting Google Analytics to send us truly meaningful data.  All traffic comes in as \PIVision\.  We see no display level activity.
                      • And, I think Google Analytics is reading users as maybe an AD group or the service account that runs Vision?  If I go on Google analytics it says there are one or two (at the most) people looking at the website, but if I go into Network Manager Statistics in SMT I can see a large number of people connected to the w3wp.exe process.

                    Right now we are pursuing the Extensibility approach that Marcos Vainer Loeff suggested:

                    • We added a file called GoogleAnalytics.js to D:\Program Files\PIPC\PIVision\Scripts\app\editor\symbols\ext
                    • The GoogleAnalytics.js file has the code below
                    • The only issue is that this is a symbol, which isn't loaded until a display is loaded, which means we get no traffic data on the home page.
                    var se = document.createElement('script');  
                    se.type = "text/javascript";  
                    se.text = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-#######');";  
                    document.getElementsByTagName('head')[0].appendChild(se);
                    
                    
                    var ne = document.createElement('noscript');
                    var ie = document.createElement('iframe');
                    ie.src = "https://www.googletagmanager.com/ns.html?id=GTM-#######";
                    ie.height = "0";
                    ie.width = "0";
                    ie.style = "display:none;visibility:hidd
                    ne.appendChild(ie);
                    document.getElementsByTagName('body')[0].appendChild(ne);
                    
                      • Re: Inserting Google Analytics into PI Vision
                        Marcos Vainer Loeff

                        Hello Damon,

                         

                        The other option is to edit the Index.html file located on the %PIHOME64%\PIVision\Views\Home folder by adding a reference to analytics.js just below "@Scripts.Render("~/bundles/libraries/jstz")". Please refer to the code below:

                         

                            @Scripts.Render("~/bundles/libraries/jquery")      
                            @Scripts.Render("~/bundles/jqueryui")      
                            @Scripts.Render("~/bundles/jqueryui/layout")  
                            @Scripts.Render("~/bundles/jquery-ui-patch")  
                            @Scripts.Render("~/bundles/libraries/hammer")  
                            @Scripts.Render("~/bundles/libraries/angular")  
                            @Scripts.Render("~/bundles/libraries/angular-gridster")  
                            @Scripts.Render("~/bundles/libraries/jstz")  
                        
                        
                            <script async src='https://www.google-analytics.com/analytics.js'></script>
                          
                          
                            @Scripts.Render("~/bundles/kendo-patch") 
                        

                         

                        In this case, Google Analytics won't work after updating PI Vision to any version.

                         

                        In the previous case, Google Analytics won't work after updating to PI Vision 4 (2018) which is developed on top of Angular 5. Therefore, if you are using PI Vision 2017 R2, any update will break GA.

                         

                        Hope this helps!

                        • Re: Inserting Google Analytics into PI Vision
                          ssauder

                          Hi Damon,

                          I also had not worked with gacutil before so that part required some Googling on the web. After installing Microsoft SDK, I found the utility in Program Files (x86)\Microsoft SDKs\Windows\v8.1A\bin\NETFX 4.5.1 Tools.

                           

                          Due to how IIS config inheritance works, editing the PI Vision web.config file is not required. Instead I added that line at the website level. Since I was using the Default Website, this was in C:\inetpub\wwwroot\web.config.

                           

                          Yes, you are not going to see any displays names or numbers in the URLs. This is expected since the part of the URL that is after the # character is not sent to the web server. PI Vision is a single-page application, and this portion of the URL is used for "client side routing", meaning that changes this portion of the URL do not correspond to actual HTTP requests made to the web server at that path.

                           

                          The messages I were forwarded and this thread were very specifically asking about Google Analytics. However based on the previous point, I do not know if Google Analytics will really provide what you need. Can you please explain the end goal you are trying to accomplish?

                           

                          I do not have any previous experience with Google Analytics but I can comment on the SMT Network Manager Statistics behavior. All the users that have connected to PI Vision since the last time the application pool was recycled will appear in that list. It does not mean they are necessarily using PI Vision at the moment. I expect that may account for the difference you are observing.