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

jantzen_b
Adobe Employee
Adobe Employee
June 11, 2018

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

exzyte
exzyteAuthor
Level 2
June 12, 2018

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

jantzen_b
Adobe Employee
Adobe Employee
June 12, 2018

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.

exzyte
exzyteAuthor
Level 2
June 13, 2018

Here's one canonical tag:

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

I will check DTM Debugger also...

jantzen_b
Adobe Employee
Adobe Employee
June 14, 2018

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?

exzyte
exzyteAuthor
Level 2
June 18, 2018

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)

jantzen_b
Adobe Employee
Adobe Employee
June 18, 2018

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.

exzyte
exzyteAuthor
Level 2
June 19, 2018

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

exzyte
exzyteAuthor
Level 2
June 19, 2018

My apologies its this tag that I added:

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

jantzen_b
Adobe Employee
Adobe Employee
June 19, 2018

stewarts16448458​ - Any experience with the Canonical tag?