Can we use Adobe Dynamic Tag Manager to add canonical tags to specific pages on Adobe Experience Manager (AEM)?
If yes, then can you please let me know how. If not then, is there any other way?
Regards
Solved! Go to Solution.
It appears that you have two page load rules (in DTM staging) that are trying to do something with the canonical tag.
MEE Canonical - Contact Us
-and-
MEE home Canonical Tag
Let's focus on the "Contact Us" rule.
-It looks like you modified the conditions, changing the match against the "Hostname" data element (This looks like a good change).
-It also looks like you added a Path condition to the rule. I can tell this because of the addition of scope:{URI:{include:[/\contact/i]}
There are a couple tricky things about "path" conditions in DTM.
1) The evaluation is not against document.location.pathname as you might expect. It is against _satellite.URI() which includes both document.location.pathname and document.location.search.
2) If a path condition is not met, there is no indication in the console of the fact.
In your case, let's test your path condition in the console:
Navigate to Middle East Electricity | Contact
Open the Dev console.
> _satellite.URI() ---- returns "/en/contact.html"
> _satellite.URI().match(/\contact/i) ----- returns null (your path condition is not met)
> _satellite.URI().match(/\/contact/i) ----- returns an array (THIS WORKS!)
^^^ You are missing the forward slash in your Path condition.
(Or could just remove the backslash as in _satellite.URI().match(/contact/i) )
The ultimate way to know if your rule is working is to check for the expected outcome.
In this case, the expected outcome is the insertion of the HTML element,
<link rel="canonical" href="https://www.middleeastelectricity.com/en/contact.html" />
To do this, you can run this in the console: document.querySelectorAll('link[rel="Canonical"]')
When everything is hunky dory, you will see a NodeList array with one item.
============================================================
I hope that this gets you going. I have a couple other things to say.
1) I don't relly like Path conditions in DTM because they don't behave like one might expect.
2) In place of path conditions I like to create a data element for document.location.pathname and use data element comparisons in conditions.
3) The rule, "MEE home Canonical Tag", is set to run at pageBottom. This rule also has problems with conditions, but if you get past those problems, you will find that the tag is not inserted in the HEAD of the document. This rule should fire at page top.
You should be able to deploy any third-party tag or pixel using DTM. Have you already setup the DTM and AEM integration?
Views
Replies
Total Likes
Yes, we already have DTM and AEM integration...
Can you please let me know how to add this thru DTM.
I tried adding canonical tags using "sequential html" with "top of page" condition before but it is not showing on "view page source".
Views
Replies
Total Likes
I'm not familiar with Canonical tags, can you share the tag? The tag is likely either HTML or Javascript and we need to place in the correct third-party section.
If you are sure the code is HTML, can you verify if the DTM rule that contains the code is firing? You can use the DTM debugger to turn on debug mode which will show what rules are firing in the console.
Views
Replies
Total Likes
Here's one canonical tag:
<link rel="canonical" href="https://www.middleeastelectricity.com/en/home.html"/>
I will check DTM Debugger also...
Views
Replies
Total Likes
That is an HTML tag.
With that said, this looks more like a simple link than code used to fire a tracking beacon or other remarking tag. Are you trying to add content to your existing site with DTM rather than use it to fire remarking beacons?
Views
Replies
Total Likes
I'm trying to add this thru DTM since there is no way(with our current AEM setup) to add this between head tags on AEM author mode.
By the way, may I know what's remarking beacons? (not familiar with this, sorry)
Views
Replies
Total Likes
I did a bit of searching on the internet to become a little more familiar with the Canonical tag. It looks like it is pretty similar to meta tags. I'm sure there is a way in AEM to add this tag to your site. I'd recommend posting a question in our Adobe Experience Manager community where I'm sure an AEM expert can give you some advice.
With that said, I'll still be happy to try and help you deploy this code via DTM. To do so, I'd recommend using a top of page rule with the code placed in the third-party sequential HTML section.
Views
Replies
Total Likes
Hi sir,
I already added canonical tag to this page: Middle East Electricity | Contact thru DTM
CONDITIONS:
Trigger rule at: Top of Page
Hostname: www.middleeastelectricity.com (regex enabled)
Path (include): /contact (regex enabled)
JAVASCRIPT / THIRD PARTY TAGS:
Sequential HTML: <link rel="canonical" href="https://www.middleeastelectricity.com/en/home.html" />
I have checked "view page source" and also Elements tab on DevTools but it is still not reflecting.
I also posted a question on Adobe Experience Manager Community =)
Views
Replies
Total Likes
My apologies its this tag that I added:
<link rel="canonical" href="https://www.middleeastelectricity.com/en/contact.html" />
Views
Replies
Total Likes
stewarts16448458 - Any experience with the Canonical tag?
Yes. You can inject your canonical tag to any page using a DTM pageTop rule and sequential HTML. You are doing that part right. I took a peek at your DTM library on the page and found this as the internal representation of your DTM Rule:
I think that your issue is in the condition of the rule. You are comparing document.location.hostname to a full URL.
I'd suggest that you modify your condition to compare document.location.pathname against /\/en\/contact.html/i
Once you do that. I think you'll see the results you expect.
Sometimes it just takes another set of eyes!
Thank you very much for the input...
I already adjusted/corrected the condition of the rule and this is now showing on DTM library of the page:
{
name:"MEE Canonical - Contact Us",
trigger:[{
command:"writeHTML",
arguments:[{
html:'
<link rel="canonical" href="https://www.middleeastelectricity.com/en/contact.html" />
}]
}],
scope:{URI:{include:[/\contact/i]}
},
conditions:[function(){
return _satellite.textMatch(_satellite.getVar("Hostname"),/\www.middleeastelectricity.com/i)
}
],
event:"pagetop"
}
^ and before I did this changes, this was showing on the DevTools Console tab:
SATELLITE: Condition function(){return _satellite.textMatch(_satellite.getVar("Hostname"),/https:\/\/www.middleeastelectricity.com\/en\/home.html/i)} for rule "MEE home Canonical Tag" not met.
And now it is gone! So does it mean that it is working fine now? =)
Views
Replies
Total Likes
My apologies, it is this info that was showing before on Chrome DevTools Console before I updated the condition:
SATELLITE: Condition function(){return _satellite.textMatch(_satellite.getVar("Hostname"),/\www.middleeastelectricity.com\/en\/contact.html/i)} for rule "MEE Canonical - Contact Us" not met
So again, does it mean that it is already working since this info is not showing anymore?
I really appreciate all the assistance that you extended.
Views
Replies
Total Likes
It appears that you have two page load rules (in DTM staging) that are trying to do something with the canonical tag.
MEE Canonical - Contact Us
-and-
MEE home Canonical Tag
Let's focus on the "Contact Us" rule.
-It looks like you modified the conditions, changing the match against the "Hostname" data element (This looks like a good change).
-It also looks like you added a Path condition to the rule. I can tell this because of the addition of scope:{URI:{include:[/\contact/i]}
There are a couple tricky things about "path" conditions in DTM.
1) The evaluation is not against document.location.pathname as you might expect. It is against _satellite.URI() which includes both document.location.pathname and document.location.search.
2) If a path condition is not met, there is no indication in the console of the fact.
In your case, let's test your path condition in the console:
Navigate to Middle East Electricity | Contact
Open the Dev console.
> _satellite.URI() ---- returns "/en/contact.html"
> _satellite.URI().match(/\contact/i) ----- returns null (your path condition is not met)
> _satellite.URI().match(/\/contact/i) ----- returns an array (THIS WORKS!)
^^^ You are missing the forward slash in your Path condition.
(Or could just remove the backslash as in _satellite.URI().match(/contact/i) )
The ultimate way to know if your rule is working is to check for the expected outcome.
In this case, the expected outcome is the insertion of the HTML element,
<link rel="canonical" href="https://www.middleeastelectricity.com/en/contact.html" />
To do this, you can run this in the console: document.querySelectorAll('link[rel="Canonical"]')
When everything is hunky dory, you will see a NodeList array with one item.
============================================================
I hope that this gets you going. I have a couple other things to say.
1) I don't relly like Path conditions in DTM because they don't behave like one might expect.
2) In place of path conditions I like to create a data element for document.location.pathname and use data element comparisons in conditions.
3) The rule, "MEE home Canonical Tag", is set to run at pageBottom. This rule also has problems with conditions, but if you get past those problems, you will find that the tag is not inserted in the HEAD of the document. This rule should fire at page top.
Thank you very much for the assistance... Anyways, I will use this advice and hope to get positive results...
Again thank you
A very good day to you!
I think I got the canonical tag working on this page "https://www.middleeastelectricity.com/en/contact.html" =)
I ran this in the console: document.querySelectorAll('link[rel="Canonical"]')
and this is what it showed:
You sure did! Looks great!
Thank you for the information you provided!
Regards
Views
Likes
Replies