Canonical Tags | Community
Skip to main content
exzyte
Level 2
June 11, 2018
Solved

Canonical Tags

  • June 11, 2018
  • 18 replies
  • 9496 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Stewart_Schilling

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.

18 replies

Stewart_Schilling
Community Advisor
Community Advisor
June 20, 2018

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!

exzyte
exzyteAuthor
Level 2
June 21, 2018

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? =)

exzyte
exzyteAuthor
Level 2
June 21, 2018

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.

Stewart_Schilling
Community Advisor
Stewart_SchillingCommunity AdvisorAccepted solution
Community Advisor
June 21, 2018

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.

exzyte
exzyteAuthor
Level 2
June 22, 2018

Thank you very much for the assistance... Anyways, I will use this advice and hope to get positive results...

Again thank you

exzyte
exzyteAuthor
Level 2
August 1, 2018

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:

Stewart_Schilling
Community Advisor
Community Advisor
August 1, 2018

You sure did!  Looks great!

exzyte
exzyteAuthor
Level 2
August 1, 2018

Thank you for the information you provided!

Regards