Custom Login Page with Register Functionality & Google Analytics

Liberty Create - Build Advice
1

Hi All,

Is it possible to have our own custom login page with functionality for the users to register themselves with a step by step information?

  1. New user lands on the login page
  2. Then clicks on the register button to select their own username, password and then move to the next step for a further level of information.

Also, Can we embed Google Analytics in Liberty Create?

Thanks
Vishal

2

Hi Vishal,

You can style the login screen and include content on it via the Authentication Flow, Introduction Text field. This could be used to add a link to a user registration webpage which could be split into a number of steps.

In terms of Google Analytics, we can drop the code into our standard page template should you wish? This will be easier than creating a widget to include on each page. As of v2020.1, and the new Portal set features, you’ll be able to do this yourself.

Richard

3

As an additional option to go along with Richard’s suggestion, you could try this

• Create a new Public Webpage to be used when logging in. From the Build Studio > Interface > Pages click Add page. Ensure that the Utilisation option on the Basics tab of the page is set as Webpage (Public) before clicking Create. In the layout of the page you can then add a form widget containing properties and attributes from the User Object such as forename, surname, username, password, security question etc. You may wish to also add the User role attribute and default it to a specific user role and also set it’s wrapper to be a hidden row so the person logging in can’t amend it.
In the settings of the Form widget set the Destination option as an External link of the login page for your app. This means that once the person creates their own account they can then use these details to log themselves in.
Once the page is published, a link to it is displayed at the top of the page (it’s called Webpage link). Click this to open the webpage and copy the URL for the next step

• Create a variable from Build Studio > Data Store > Variables. This will be a base format of text, multi-line formatted and contain the text that will be displayed on the login page to instruct someone to create their own account e.g. ‘If you don’t have an account click here to create one’. You can then add a link to the webpage created above within the text (the ‘click here’ text is probably the best option to add this to)

• Use the variable above on the login page. To do this, go to Build Studio>System> System Variables. Select the variable created above from the Login message drop down option

Now, when opening the login page, the variable created above should display below the standard sign in option. Clicking the hyperlink in the text will allow your user to self register. Once they complete the form they will then be redirected back to the login page from where they can log themselves in using their newly created account.

4

Thanks @richard.billington .
That will be great if you can drop the code in page template.

5

Thanks, @Fabio.Brugnoli. Yes, that’s what I followed and it worked like a treat.
I was wondering if I have to add a register button and images on Liberty Create standard Login page, adding it to style sheet would be the best approach?

6

@richard.billington Just found this thread, really interested in how we get our Tracking code onto our public facing pages. Please can you provide further advice about how i’d do this in 2020.1

Thanks

Kev

7

Hi @kevin.rowe,

Will get one of the guys to drop you a message tomorrow with some instructions and the offer of a call if needed.

Hope you’re well,
Richard

8

Hi Kevin,

In v2020.1 you can create a snippet template, which then can be used on customer facing web pages. To do that you need:

  • In “Build Studio > Assets > Templates” to create a new template.
  • for Utilisation setting for the template you need to select “Snippet”,
  • In “Content” tab, click “Content” button in the editor and paste your tracking code in it and save the template.
  • In “Build Studio > Security > Firewall & Access Profiles” select webpage and click on “Domains” tab.
  • In “Domains that can use Liberty Create application content” add the URL of the tracker in order to allow it to access the system and receive data from it.
  • If there is content that is loaded from the Tracker system (CSS styles, JS etc.) you need to add the domain in the “Domains that can contribute content to the Liberty Create application” too.
  • On the webpage where you want your Tracker added, add “Info by Template” widget at the bottom of the page and for “Template” setting select the Snippet template that you’ve created and save the webpage.

Regards,
Pavel

9

I’m finally at a point of adding tracking codes to pages (we want to add google and hotjar on the pages) but not having much luck with this solution as it shows the tracking code text on the screen so that the user can see it, if i hide the widget the tracking code is no longer loaded. Please can I have some further advice? Would we be better off putting it in a themepack?

10

We’d like to get Google Analytics working for our applications, too, Kevin so I hope NetCall can point us in the right direction.

11

We sussed it in the end, we added the code in a snippet the the “source” not in the GUI. Also, we have done an opt out boolean, which appears on page 1 (not tracked, but the website they came from is tracked) which controls the visibility of the tracking on subsequent pages. We also managed to add Hotjar to the same snippet. Let me know if you want a 10 min call to take a look.

12

Excellent, thanks Kevin - apologies for my slow reply. I’m OK for a call about this today, if you are - give me a call on Teams.

13

Hi all, we are looking to add Google Analytics as well and would love to hear how others accomplished this. Any insights would be helpful and could connect you with our development team to implement.

@kevin.rowe @mherdman