Expand my Community achievements bar.

How to tag specific pages on a one page website (angular app)

Avatar

Level 2

I have this website that is structured this way : domain/website 1, domain/website 2 (different white label websites). I want to place an analytical tag to all domain/website 1 pages (e.g. domain/website 1/quote, domain/website 1/products, domain/website 1/cart, etc). The full website was built using angular/single page application.

 

Even if I place the tag to cover the scenario I want, it ends up firing the tag for all pages (include unwanted ones). Even if all the pages are loaded at one, when I browser different inner pages, the URL changes, as well as I can see it being recorded (URL history).

 

URL DataLayer is not configured in the backend, therefore I used Path without Query String and added in the path field /website 1. I tested with the Regex set as on and off.

 

Any idea on the best way to configure the condition so the tag is only fired when meeting the above condition?  The main purpose of it is that I will be adding GA4 tag of a partner in the website, but I don't want the information from other websites that don't belong to them be shared and right now everything is being captured.

 

Thank you,

2 Replies

Avatar

Level 4

I might suggest creating multiple properties as how complex it can get when you start having multiple sites. 
You technically don't want to be loading a large launch library for sites that may not need be needing that code.

 

But for maintainability, it might be worth building some mechanisms to do that.

 

I would start with a Data Element (let's call it subSite) that checks which site you are on.

var pathArray = window.location.pathname.split('/');
// Check the first level. Or whatever how you define the sub-site
if (pathArray[1]) {
   return pathArray[1]; // Returns the name of the first subfolder
} else {
   return ""; // Returns this if no subfolder is found
}

 

So in your example if you have domain/website1 and domain/website2, you can then use this DE to check like this:

if (_satellite.getVar("subSite") === "website1") {
// Do the code for website 1
}

 Or you can use Rule Conditions to go:

franzli_0-1701893027723.png

 

These are the basics. Some things to consider:

1. Instead of using multiple rules, you can have an associative array for the website for all the IDs such as gtag codes so you aren't having to paste the multiple GTAG Libraries, Meta Pixels etc. and just replace the ID based on the subSite you are on.

 

2. Since you are relying on subfolder, it can break easily if it doesn't follow the convention

 

3. Ideally build out a client dataLayer https://experienceleague.adobe.com/docs/experience-manager-learn/sites/integrations/adobe-client-dat...

 

Avatar

Level 2

Hi @franzli,

 

Your suggestion work, but I am encountering the following issue.

 

I am placing the tag on domain/website 1 and its sub-pages and GA4 tag is firing okay. However, when I have another sub-website the behavior is as the follows:

 

domain/website 2 >> Tag doesn't fire (it is what supposed to happen)

But when I navigate in the website and click on other inner links the tag fires.

 

e.g.  domain/website 2 >> domain/website 2/find-a-plan (tags fires)

 

Any suggestion on preventing the tag to fire up in the example above?

 

Thank you,