bcgov / digital-journeys

PSA Forms System
https://bcgov.github.io/digital-journeys/
Apache License 2.0
8 stars 7 forks source link

Snowplow Analytics #1352

Closed warrenchristian1telus closed 4 months ago

warrenchristian1telus commented 1 year ago

To implement GTX / Snowplow Analytics on the PSA Analytics Dashboard:

https://intranet.qa.gov.bc.ca/analytics/psa-analytics

We will need to first implement the test script and have GTX validate it. This can be done in the dev namespace only, although it wouldn't hurt anything if it goes to test or prod.

We have used an environment variable in other projects to set the main Snowplow URL for dev or prod.

Dev:

SNOWPLOW_COLLECTOR=spm.apps.gov.bc.ca

Prod:

SNOWPLOW_COLLECTOR=spt.apps.gov.bc.ca

JavaScript code that needs to be implemented (preferably at the end of HTML). Note that the SNOWPLOW_COLLECTOR variable will need to be replaced / injected.

<script> // <!-- Snowplow starts plowing - Standalone vE.2.14.0 --> var collector = '{{ env('SNOWPLOW_COLLECTOR') }}'; if(collector != null && collector != ''){ ;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[]; p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments) };p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1; n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","https://www2.gov.bc.ca/StaticWebResources/static/sp/sp-2-14-0.js","snowplow")); window.snowplow('newTracker','rt',collector, { appId: 'Snowplow_standalone_PSA', cookieLifetime: 86400 * 548, platform: 'web', post: true, forceSecureTracker: true, contexts: { webPage: true, performanceTiming: true } }); window.snowplow('enableActivityTracking', 30, 30); // Ping every 30 seconds after 30 seconds window.snowplow('enableLinkClickTracking'); window.snowplow('trackPageView'); } // <!-- Snowplow stops plowing –> </script>

NOTE: Dan will test this ticket.

Stella-Archer commented 8 months ago

@warrenchristian1telus could you help us confirm estimate for this 2-3 points?

warrenchristian1telus commented 8 months ago

That sounds reasonable @Stella-Archer. Maybe 3 points as it involves some coordination with GTX. From previous experience, I'd say it'll take 2-3 weeks to fully implement once we have the code in place. I'm not sure about the code implementation, but expect one of the devs could handle it within a few minutes (not counting deployment time). Should just have to copy-paste the script above.

Stella-Archer commented 7 months ago

@warrenchristian1telus provide details so developers can implement the config in the code base

warrenchristian1telus commented 7 months ago

@Stella-Archer the JavaScript code required by the developers is in the first post above. This will need to be placed in a location where it will load on every page. Or at least every page that should be tracked.

The correct environment variable (SNOWPLOW_COLLECTOR) must also be set to match the desired environment as detailed above. We will need to setup dev first, then once completed/approved by GTX team, we can proceed with production implementation and verification.

jerry-ey commented 6 months ago

Currently implemented the script locally. Need help for setting the env variable on openshift. Draft PR: https://github.com/bcgov/digital-journeys/pull/1735

jerry-ey commented 6 months ago

Ready for review again.

warrenchristian1telus commented 6 months ago

I've verified that the dev site is now sending requests to spm.apps.gov.bc.ca as expected. I've notified Dan at GTX to complete the dashboard integration. Once everything is ready/verified we should be able to migrate through to production.

warrenchristian1telus commented 6 months ago

@jerry-ey I received a response from Dan:

"The base tracker is working, but there are some fixes we'll likely want to make to handle Single Page Web App issues."

He would like to set up a quick call to discuss. I'll add you to the email chain so we can figure out a good time.

jerry-ey commented 6 months ago

Thanks, received the email. Will discuss with Dan on the call once he sets up the meeting.

jerry-ey commented 6 months ago

The code is deployed to TEST and merged to main branch. Waiting for the call setup from Dan, haven't received from him for meeting schedule.

fazil-ey commented 5 months ago

Jerry meeting with Warren and Dan to discuss the next steps

jerry-ey commented 5 months ago

Had the meeting with Dan and Warren. There are 2 issue we need to resolve: I'll put "3" for estimation.

CleanShot 2024-05-09 at 14.53.25@2x.png
jerry-ey commented 5 months ago

Snowplow chrome extension for better debugging: https://chromewebstore.google.com/detail/snowplow-inspector/maplkdomeamdlngconidoefjpogkmljm

warrenchristian1telus commented 5 months ago

Dan also mentioned that GTX offers a free workshop to discuss and cost more advanced tracking opportunities, if we are interested at some point. @Stella-Archer @Abuchana @fazil-ey

fazil-ey commented 5 months ago

Thanks @jerry-ey

jerry-ey commented 5 months ago

@warrenchristian1telus FYI, The two issues from Dan are fixed and deployed to DEV and TEST.

warrenchristian1telus commented 5 months ago

Great - thank you @jerry-ey

I'll run this by Dan and see if we can move forward with production next week.

warrenchristian1telus commented 5 months ago

@jerry-ey Just a thought here, but I was wondering if it may be helpful to get more relevant titles into the pages. Rather than "Digital Journeys", we could have "Drafts: Telework" or something similar. This would likely make it much easier to separate and identify traffic in the resulting reports. Maybe there's a way we could use what's displayed to the user for the page title in the tag as well? Something to consider anyway.</p> <p><img src="https://github.com/bcgov/digital-journeys/assets/70002196/358434a1-1b27-49a2-8e1e-e3364afbc398" alt="image" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jerry-ey"><img src="https://avatars.githubusercontent.com/u/146475472?v=4" />jerry-ey</a> commented <strong> 5 months ago</strong> </div> <div class="markdown-body"> <p>I don't experience the duplicate issue, sent email to Dan to get more info.</p> <img width="1255" src="https://api.zenhub.com/attachedFiles/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBekxkQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--becf1e8341bce8b40104246aed9916a6e99c11b7/CleanShot%202024-05-14%20at%2010.34.22.png" alt="CleanShot 2024-05-14 at 10.34.22.png" /> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jerry-ey"><img src="https://avatars.githubusercontent.com/u/146475472?v=4" />jerry-ey</a> commented <strong> 5 months ago</strong> </div> <div class="markdown-body"> <h3>Feedback from Dan</h3> <p>I noticed one other minor issue. It looks like the AppID isn't being set, can you add this to the code where the object is firs appId: 'Snowplow_standalone_PSA', I think the whole thing will likely look something like: var collector = 'spm.apps.gov.bc.ca'; window. snowplow ('newTracker', 'rt', collector, ( appId: 'Snowplow_standalone_PSA', cookieLifetime: 86400 * 548, platform: 'web', post: true, forceSecureTracker: true, contexts: ( webPage: true, performanceTiming: true }) : Here are the steps to reproduce the double call: 1) Visit <a href="https://digital-journeys-dev.apps.silver.devops.gov.bc.ca/">https://digital-journeys-dev.apps.silver.devops.gov.bc.ca/</a> I am redirected to " Log in to Digital Journeys with". No Snowplow call yet. (Not sure if you want one here, but you could add one if you want to see how many people hit the 2) Login via IDIR I am redirected to httos://lozon7.rov.bc.ca (which also doesn't have Snowolow trackine. but the production version does'</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jerry-ey"><img src="https://avatars.githubusercontent.com/u/146475472?v=4" />jerry-ey</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <p>@warrenchristian1telus The new fix is up to DEV and TEST.</p> <ul> <li>add app_id</li> <li>double call</li> </ul> <p>I have tested on TEST. Once DEV is up, please let Dan know to test. Thanks.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/warrenchristian1telus"><img src="https://avatars.githubusercontent.com/u/70002196?v=4" />warrenchristian1telus</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <p>Thank you @jerry-ey. Dev is back online, and I have notified Dan to verify everything looks good on his end. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jerry-ey"><img src="https://avatars.githubusercontent.com/u/146475472?v=4" />jerry-ey</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <p>It's been a week and we didn't get back from Dan. I sent another email to follow up again.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jerry-ey"><img src="https://avatars.githubusercontent.com/u/146475472?v=4" />jerry-ey</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <p>The client test has passed. And we did deploy to production with correct url. Just sent the email to ask for the next step.</p> <img width="540" src="https://api.zenhub.com/attachedFiles/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeWhpQlE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--bed652ce02fd4fa574a402f05b45a1a315b19816/CleanShot%202024-06-13%20at%2012.13.32.png" alt="CleanShot 2024-06-13 at 12.13.32.png" /> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Abuchana"><img src="https://avatars.githubusercontent.com/u/76966051?v=4" />Abuchana</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <p>Warren to reach out to Dan about access to the dashboard for Stella and team.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jerry-ey"><img src="https://avatars.githubusercontent.com/u/146475472?v=4" />jerry-ey</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <img width="677" src="https://api.zenhub.com/attachedFiles/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMkNJQlE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--0b3fdbc37766a11273e4f187c2c514c27cc797fa/image.png" alt="image.png" /> <p>The dashboards have been added to <a href="https://intranet.qa.gov.bc.ca/analytics/psa-analytics">https://intranet.qa.gov.bc.ca/analytics/psa-analytics</a></p> <p>Thanks!</p> <p>Dan</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Stella-Archer"><img src="https://avatars.githubusercontent.com/u/97642345?v=4" />Stella-Archer</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <p>@Stella-Archer will ask GDX service desk /Dan P about access to viewing dashboard</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Stella-Archer"><img src="https://avatars.githubusercontent.com/u/97642345?v=4" />Stella-Archer</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <p>Naming Convention on URLS/IDs open new ticket for exploring page names form names</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Stella-Archer"><img src="https://avatars.githubusercontent.com/u/97642345?v=4" />Stella-Archer</a> commented <strong> 4 months ago</strong> </div> <div class="markdown-body"> <p>other domains? Key cloak, API domain BPM / cammunda? - Explore - Files/documents</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>