I am new to using Tealium. I am trying to incorporate Tealium Tag to the last login information. How do I go about it? Below is the code:
HTML Component for last log in date
S-component.html
<div #greeting class="greeting-message">
<ng-container *ngIf="userProfile$ | async as userProfile">
<h1 qa-name="greetingMessage">
Good {{ timeOfDay }},
{{ userProfile.displayName || userProfile.firstName || '' }}
</h1>
<p *ngIf="userProfile.lastLoginDate" qa-name="lastLoggedIn">
You last logged in at
{{
userProfile.lastLoginDate | date: "h:mm:ssaaaaa'm' on MMMM d, y"
}}
</p>
<p *ngIf="!userProfile.lastLoginDate">
Welcome!
</p>
</ng-container>
</div>
Below is the User profile interface
i-user-profile.ts
export interface IUserProfile {
lastLoginDate?: Date
}
Below is the typescript component that contains the time of day and hour a user logs in
S-component.ts
import {
IUserProfile
} from '@shared/interfaces';
import {
TealiumService
} from '@shared/services';
export class SComponent implements OnInit {
private static getTimeOfDay(hour: number): TimeOfDay;
public ngOnInit() {
this.timeOfDay = AccountSummaryComponent.getTimeOfDay(
new Date().getHours()
);
}
constructor(
private readonly _tealiumService: TealiumService,
private readonly _userService: UserService
) {
this.userProfile$ = this._userService.profileChanges();
this.timeOfDay = SComponent.getTimeOfDay(
new Date().getHours()
);
}
}
If you want to pass that data into Tealium then you have a few different options. You will need to ensure that your page already contains the Tealium tag, details on how to add that can be found in Tealium's docs. If you use the serverside products then you can create a visitor attribute that saves the last login date, this can be done in the dashboard without modifying your code.
If you only use the client-side products then you will need to add the
userProfile.lastLoginDatevariable to the utag_data object on your page. This data will be passed into Tealium when autag.view()call is made. The relevant portion of your code where you will need to add this is in the script just before your utag.js file is loaded. There is more information about this at the previous link.