How do I dynamically reference a css file in a tag when I need the root domain to change with our environments?

[joseph_brown]

We are using OpinionLab and I need to reference the css file we host. The issue is the reference needs to change as we go through our environments. Dev = https://dev.lfg.com/hub/SimpleFile?dDocName=HUB_013794&RevisionSelectionMethod=LatestReleased&inline... TEST = https://hub2-Test.lfg.com/hub/SimpleFile?dDocName=HUB_013794&RevisionSelectionMethod=LatestReleased&... QA = https://qa.lfg.com/hub/SimpleFile?dDocName=HUB_013794&RevisionSelectionMethod=LatestReleased&inline=... UAT = https://uat.lfg.com/hub/SimpleFile?dDocName=HUB_013794&RevisionSelectionMethod=LatestReleased&inline... PREPROD = https://preprod.lfg.com/hub/SimpleFile?dDocName=HUB_013794&RevisionSelectionMethod=LatestReleased&in... PROD = https://ww.lfg.com/hub/SimpleFile?dDocName=HUB_013794&RevisionSelectionMethod=LatestReleased&inline=... I cannot allow an environment to load the css from a different environment because it messes up some cookies our site sets outside of tealium that prevents a user from logging into our site.

[mike_anderson]

Joe, one of our solutions guys may have something better, but you can try this. Add your production version of Opinion Lab, then duplicate it twice once for Dev and once for QA. Set the CSS paths for each Opinion Lab instance respectively. Go into edit mode for the tag and under Advanced Settings for the tags there is a "publish to" configuration. Set the dev instance to publish to dev, and not to qa and prod, rinse and repeat for the other two tags. You should have a situation where when publishing to dev the Opinion Lab Dev tag publishes with the correct CSS path, etc. We have another feature that is coming out which is target (dev, qa, prod) specific configs for each tag. When this is released you'll be able to enter specific configurations for each target environment. This will be helpful when you have different accounts for different environments.

[joseph_brown]

Awesome. Thanks for the quick reply.

[dan_george]

Wouldn't it just be easier to use a relative path to the CSS file instead of an absolute path? Example absolute CSS call: href="http://www.tealium.com/styles/tealium.css" Example relative CSS call: href="/styles/tealium.css" Therefore if you load from the TEST environment "/styles/tealium.css" will call https://hub2-Test.lfg.com/styles/tealium.css or if you load from the QA environment "/styles/tealium.css" will call https://qa.lfg.com/styles/tealium.css". Or does the path need to be absolute? I know the configurations say to use the full path, but just curious why.

[TealiumJustin · Accepted solution]

Hi Joseph, You should be able to use the relative path to the CSS file in the OpinionLab setting. /hub/SimpleFile?dDocName=HUB_013794&RevisionSelectionMethod=LatestReleased&inline=true

[joseph_brown]

I was under the impression the relative path would resolve to the tealium cdn since that is where the code is being served from, no?

[dan_george]

While the code is servered from the CDN, the webpage still makes the call out to OL since we just inject the call into the page.

[mike_anderson]

No, Dan and Justin are correct with the relative paths. The path will be relative to the container page URL and not our CDN.

[joseph_brown]

That makes it easy. Thanks.