De insluitcode toevoegen
In deze les, zult u asynchrone inbedcode van de milieu van de Ontwikkeling van uw markeringsbezit uitvoeren. Tijdens het gebruik leert u over twee belangrijke concepten van tags: omgevingen en insluitingscodes.
- Platform launch (de Kant van de Cliënt) is nu tags
- De Server zijde van de platform launch is nu event forwarding
- De configuraties van Edge zijn nu datastreams
Leerdoelen
Aan het eind van deze les, zult u kunnen:
- Haal de insluitcode voor de eigenschap tag op
- Begrijp het verschil tussen een Ontwikkeling, het Opvoeren, en het milieu van de Productie
- Code voor het insluiten van tags toevoegen aan een HTML-document
- Beschrijf de optimale locatie van de code voor het insluiten van tags ten opzichte van andere code in de
<head>van een HTML-document
De insluitcode kopiëren
De insluitcode is een <script> -tag die u op uw webpagina's plaatst om de logica die u in tags maakt te laden en uit te voeren. Als u de bibliotheek asynchroon laadt, blijft de browser de pagina laden, wordt de tagbibliotheek opgehaald en parallel uitgevoerd. In dit geval is er slechts één insluitcode die u in <head> plaatst. (Wanneer tags synchroon worden geïmplementeerd, zijn er twee insluitcodes die u in de <head> plaatst en een andere die u vóór de </body> plaatst.)
Klik in het scherm Overzicht van de eigenschap op Environments in de linkernavigatie om naar de pagina met omgevingen te gaan. Merk op dat de milieu's van de Ontwikkeling, van het Staging, en van de Productie voor u vooraf zijn gecreeerd.
De ontwikkeling, het Staging, en de milieu's van de Productie beantwoorden aan de typische milieu's in het codeontwikkeling en versieproces. De code wordt eerst geschreven door een ontwikkelaar in een milieu van de Ontwikkeling. Wanneer zij hun werk hebben voltooid, sturen zij het naar een het Opvoeren milieu voor QA en andere teams om te herzien. Zodra de kwaliteitscontrole en andere teams tevreden zijn, wordt de code vervolgens gepubliceerd naar de productieomgeving. Dit is de openbare omgeving die uw bezoekers ervaren wanneer ze naar uw website komen.
De markeringen staan extra milieu's van de Ontwikkeling toe, die in grote organisaties nuttig zijn waarin de veelvoudige ontwikkelaars aan verschillende projecten tezelfdertijd werken.
Dit zijn de enige omgevingen die we nodig hebben om de zelfstudie te voltooien. Met omgevingen kunt u verschillende werkversies van uw tagbibliotheken gebruiken die op verschillende URL's worden gehost, zodat u veilig nieuwe functies kunt toevoegen en beschikbaar kunt maken voor de juiste gebruikers (zoals ontwikkelaars, QA-technici, het publiek, enz.) op het juiste moment.
Kopieer nu de insluitcode:
-
In de Development rij, klik het Install pictogram
-
Merk op dat de markeringen aan de asynchrone insluitcodes zullen gebrek
-
Klik het pictogram van het Exemplaar
-
Klik op Close om het modaal te sluiten.
De insluitcode implementeren in de <head> van de HTML-voorbeeldpagina
De insluitcode moet worden geïmplementeerd in het element <head> van alle HTML-pagina's die de eigenschap delen. U hebt mogelijk een of meerdere sjabloonbestanden die de <head> globaal op de site beheren, waardoor het eenvoudig is tags toe te voegen.
Kopieer de HTML-voorbeeldpaginacode en plak deze in een code-editor als u dat nog niet hebt gedaan. Haakjesis een vrije, open bronredacteur als u nodig hebt.
| code language-html |
|---|
|
Vervang de bestaande insluitcode op of rond regel 34 door de code op het klembord en sla de pagina op. Open de pagina nu in een webbrowser. Als u de pagina laadt met het protocol file:// , moet u "https:" toevoegen aan het begin van de insluitcode-URL in uw code-editor). Regels 33-36 van de voorbeeldpagina kunnen er ongeveer als volgt uitzien:
<!--Tags Header Embed Code: REPLACE LINE 39 WITH THE EMBED CODE FROM YOUR OWN DEVELOPMENT ENVIRONMENT-->
<script src="https://assets.adobedtm.com/launch-ENa21cfed3f06f4ddf9690de8077b39e81-development.min.js" async></script>
<!--/Tags Header Embed Code-->
Open de ontwikkelaarsgereedschappen van uw webbrowser en ga naar het tabblad Netwerk. Op dit punt wordt een fout van 404 weergegeven voor de URL van de tagomgeving:
De fout 404 wordt verwacht omdat u nog geen bibliotheek in deze milieu van Markeringen hebt gebouwd. Dat zult u in de volgende les doen. Als u een ''failed''-bericht ziet in plaats van een 404-fout, bent u waarschijnlijk vergeten het https:// -protocol toe te voegen aan de insluitcode. U hoeft het https:// -protocol alleen op te geven als u de voorbeeldpagina laadt met het file:// -protocol. Breng deze wijziging aan en laad de pagina opnieuw totdat de fout 404 wordt weergegeven.
Aanbevolen werkwijzen voor implementatie van tags
Neem even de tijd om enkele best practices bij de implementatie van Codes te bekijken die op de voorbeeldpagina worden getoond:
-
Laag van Gegevens:
-
Wij adviseren sterk creërend een gegevenslaag op uw plaats die alle attributen bevat nodig om variabelen in Analytics, Doel, en andere marketing oplossingen te bevolken. Deze voorbeeldpagina bevat alleen een zeer eenvoudige gegevenslaag, maar een echte gegevenslaag kan veel meer details bevatten over de pagina, de bezoeker, hun winkelwagendetails, enzovoort. Voor meer info over gegevenslagen, gelieve te zien de Ervaring Digitale Laag van Gegevens 1.0 van de Klant
-
Definieer de gegevenslaag vóór de code voor het insluiten van tags om te maximaliseren wat u kunt doen met oplossingen voor Experiencen Cloud.
-
-
de helperbibliotheken van JavaScript: Als u reeds een bibliotheek als JQuery hebt die in
<head>van uw pagina's wordt uitgevoerd, laad het vóór markeringen om zijn syntaxis in markeringen en Doel te hefboomwerking -
HTML5 doctype: Het HTML5 documenttype wordt vereist door Doel
-
preconnect en dns-prefetch: Gebruik preconnect en dns-prefetch om de tijd van de paginading te verbeteren. Zie ook: https://w3c.github.io/resource-hints/
-
pre-verbergend fragment voor asynchrone implementaties van het Doel: U zult meer over dit in de les van het Doel leren, maar wanneer het Doel via asynchrone markering wordt opgesteld bed codes in, zou u een pre-verbergend fragment op uw pagina's vóór de markering moeten hardcoderen bed codes in om inhoudflikkering te beheren
Hier volgt een overzicht van hoe deze beste praktijken in de voorgestelde orde eruit zien. Houd er rekening mee dat er enkele plaatsaanduidingen zijn voor accountspecifieke details:
<!doctype html>
<html lang="en">
<head>
<title>Basic Demo</title>
<!--Preconnect and DNS-Prefetch to improve page load time. REPLACE "techmarketingdemos" WITH YOUR OWN AAM PARTNER ID, TARGET CLIENT CODE, AND ANALYTICS TRACKING SERVER-->
<link rel="preconnect" href="//dpm.demdex.net">
<link rel="preconnect" href="//fast.techmarketingdemos.demdex.net">
<link rel="preconnect" href="//techmarketingdemos.demdex.net">
<link rel="preconnect" href="//cm.everesttech.net">
<link rel="preconnect" href="//techmarketingdemos.tt.omtrdc.net">
<link rel="preconnect" href="//techmarketingdemos.sc.omtrdc.net">
<link rel="dns-prefetch" href="//dpm.demdex.net">
<link rel="dns-prefetch" href="//fast.techmarketingdemos.demdex.net">
<link rel="dns-prefetch" href="//techmarketingdemos.demdex.net">
<link rel="dns-prefetch" href="//cm.everesttech.net">
<link rel="dns-prefetch" href="//techmarketingdemos.tt.omtrdc.net">
<link rel="dns-prefetch" href="//techmarketingdemos.sc.omtrdc.net">
<!--/Preconnect and DNS-Prefetch-->
<!--Data Layer to enable rich data collection and targeting-->
<script>
var digitalData = {
"page": {
"pageInfo" : {
"pageName": "Home"
}
}
};
</script>
<!--/Data Layer-->
<!--jQuery or other helper libraries-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--/jQuery-->
<!--prehiding snippet for Adobe Target with asynchronous tags deployment-->
<script>
(function(g,b,d,f){(function(a,c,d){if(a){var e=b.createElement("style");e.id=c;e.innerHTML=d;a.appendChild(e)}})(b.getElementsByTagName("head")[0],"at-body-style",d);setTimeout(function(){var a=b.getElementsByTagName("head")[0];if(a){var c=b.getElementById("at-body-style");c&&a.removeChild(c)}},f)})(window,document,"body {opacity: 0 !important}",3E3);
</script>
<!--/prehiding snippet for Adobe Target with asynchronous tags deployment-->
<!--Tags Header Embed Code: REPLACE LINE 39 WITH THE INSTALL CODE FROM YOUR OWN DEVELOPMENT ENVIRONMENT-->
<script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
<!--/Tags Header Embed Code-->
</head>
<body>
<h1>Tags Basic Demo</h1>
<p>This is a very simple page to demonstrate basic concepts of tags</p>
</body>
</html>
Nu weet u hoe u de code voor het insluiten van tags aan uw site kunt toevoegen!
Volgende "Voeg een gegevenselement, een regel en een bibliotheek toe" >