Expand my Community achievements bar.

SOLVED

Canonical Tags

Avatar

Level 3

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

18 Replies

Avatar

Level 10

You should be able to deploy any third-party tag or pixel using DTM. Have you already setup the DTM and AEM integration?

Avatar

Level 3

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".

Avatar

Level 10

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.

Avatar

Level 3

Here's one canonical tag:

<link rel="canonical" href="https://www.middleeastelectricity.com/en/home.html"/>

I will check DTM Debugger also...

Avatar

Level 10

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?

Avatar

Level 3

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)

Avatar

Level 10

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.

Avatar

Level 3

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

Avatar

Level 3

My apologies its this tag that I added:

<link rel="canonical" href="https://www.middleeastelectricity.com/en/contact.html" />

Avatar

Community Advisor

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!

Avatar

Level 3

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

Avatar

Level 3

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.

Avatar

Correct answer by
Community Advisor

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.

Avatar

Level 3

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

Again thank you

Avatar

Level 3

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:

devtool.jpg

Avatar

Level 3

Thank you for the information you provided!

Regards