Add Copy to Clipboard CTA tracking

README.asciidoc

@@ -238,8 +238,6 @@ To force *all* versions of the documentation to be rebuilt (not just the calcula
 @elasticmachine, run elasticsearch-ci/docs rebuild
 ----------------------------
 
-
-
 [[config]]
 == Adding new docs or new branches
 
@@ -276,6 +274,23 @@ want to build a version called "4.2" but have it build out of a branch called
 `branches` list. Everywhere else in `conf.yaml`, continue to use
 `branch-for-4.2`.
 
+[[run-tests]]
+== Run tests
+
+When developing new features or fixing bugs in the build process, run the test suite locally with:
+
+[source,bash]
+----
+make
+----
+
+Alternatively, run just the Asciidoctor tests with:
+
+[source,bash]
+----
+make asciidoctor_check
+----
+
 [[asciidoc-guide]]
 = Asciidoc Guide
 

integtest/spec/helper/console_alternative_examples.rb

@@ -47,7 +47,7 @@ module ConsoleExamples
     it 'contains the js listing followed by the csharp listing' do
       expect(body).to include(<<~HTML.strip)
         <div class="pre_wrapper lang-js alternative">
-        <div class="console_code_copy" title="Copy to clipboard"></div>
+        <div class="console_code_copy" title="Copy to clipboard" data-track="cta"><span class="visually-hidden">Copy to clipboard</span></div>
         <pre class="programlisting prettyprint lang-js alternative">const result = await client.search({
           body: { query: 'foo bar' } <a id="A0-CO1-1"></a><i class="conum" data-value="1"></i>
         })</pre>
@@ -58,7 +58,7 @@ module ConsoleExamples
     it 'contains the csharp listing followed by the default listing' do
       expect(body).to include(<<~HTML.strip)
         <div class="pre_wrapper lang-csharp alternative">
-        <div class="console_code_copy" title="Copy to clipboard"></div>
+        <div class="console_code_copy" title="Copy to clipboard" data-track="cta"><span class="visually-hidden">Copy to clipboard</span></div>
         <pre class="programlisting prettyprint lang-csharp alternative">var searchResponse = _client.Search&lt;Project&gt;(s =&gt; s
             .Query(q =&gt; q
                 .QueryString(m =&gt; m
@@ -74,7 +74,7 @@ module ConsoleExamples
     it 'contains the default listing followed by the console widget' do
       expect(body).to include(<<~HTML.strip)
         <div class="pre_wrapper lang-console default #{has_classes}">
-        <div class="console_code_copy" title="Copy to clipboard"></div>
+        <div class="console_code_copy" title="Copy to clipboard" data-track="cta"><span class="visually-hidden">Copy to clipboard</span></div>
         <pre class="programlisting prettyprint lang-console default #{has_classes}">GET /_search
         {
             "query": "foo bar" <a id="CO1-1"></a><i class="conum" data-value="1"></i>

resources/asciidoctor/lib/docbook_compat/convert_listing.rb

@@ -50,9 +50,11 @@ def convert_listing_body(node)
     def convert_listing_body_with_language(node, lang)
       extra_classes = node.roles.empty? ? '' : " #{node.roles.join ' '}"
       pre_classes = "programlisting prettyprint lang-#{lang}#{extra_classes}"
+      c_cla = '"console_code_copy" title="Copy to clipboard" data-track="cta"'
+      span = '<span class="visually-hidden">Copy to clipboard</span>'
       [
         %(<div class="pre_wrapper lang-#{lang}#{extra_classes}">),
-        %(<div class="console_code_copy" title="Copy to clipboard"></div>),
+        %(<div class=#{c_cla}>#{span}</div>),
         %(<pre class="#{pre_classes}">#{node.content || ''}</pre>),
         %(</div>),
       ].join "\n"

resources/asciidoctor/spec/docbook_compat_spec.rb

@@ -995,7 +995,7 @@
       # It is important that there isn't any extra space around the <pre> tags
       expect(converted).to include(<<~HTML)
         <div class="pre_wrapper lang-sh">
-        <div class="console_code_copy" title="Copy to clipboard"></div>
+        <div class="console_code_copy" title="Copy to clipboard" data-track="cta"><span class="visually-hidden">Copy to clipboard</span></div>
         <pre class="programlisting prettyprint lang-sh">cpanm Search::Elasticsearch</pre>
         </div>
       HTML
@@ -1184,7 +1184,7 @@
       it 'the role is included as a class' do
         expect(converted).to include(<<~HTML)
           <div class="pre_wrapper lang-sh foo">
-          <div class="console_code_copy" title="Copy to clipboard"></div>
+          <div class="console_code_copy" title="Copy to clipboard" data-track="cta"><span class="visually-hidden">Copy to clipboard</span></div>
           <pre class="programlisting prettyprint lang-sh foo">cpanm Search::Elasticsearch</pre>
           </div>
         HTML

resources/web/style/code.pcss

@@ -83,4 +83,18 @@
   .alternative {
     display: none;
   }
+
+  /* Hide "Copy to Clipboard" text */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap; /* Avoid line breaks */
+  }
 }